Передача данных из экземпляра Vue в компонент Vue

Question

Как передать данные из экземпляра Vue в компонент Vue? Я пытаюсь сделать 'V-за' на 'LI', который находится в моем компоненте шаблона, вот fiddle

HTML

<div id="app"> 
    <my-notification></my-notification> 
</div> 

<template id="my-template"> 
    <ul> 
     <li v-for="nn in notifications">{{ nn }}</li> 
    </ul> 
</template> 

Вью сценарий

Vue.component('my-notification',{ 
    template : '#my-template', 
}); 

new Vue({ 
    el : '#app', 
    data : { 
     notifications : ['notification 1','notification 2','notification 3'] 
    } 
}); 

К сожалению, то, что есть Я пробовал до сих пор (см. Мою скрипку), не работает, пожалуйста, помогите?

Answer 1

Я обновил мой код

<div id="app"> 
    <my-notification :notification="notifications"></my-notification> 
</div> 

<template id="my-template"> 
    <ul> 
     <li v-for="nn in nns">{{ nn }}</li> 
    </ul> 
</template> 

Vue.component('my-notification',{ 
    template : '#my-template', 
    props : ['notification'], 
    data : function(){ 
     return { 
      nns : this.notification 
     } 
    } 
}); 

new Vue({ 
    el : '#app', 
    data : { 
     notifications : ['notification 1','notification 2','notification 3'] 
    } 
});