Vue 인스턴스의 데이터를 Vue 구성 요소로 전달

Question

Vue 인스턴스의 데이터를 Vue 구성 요소로 전달하려면 어떻게해야합니까? 나는 여기에 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'] 
    } 
}); 

가 가지고있는 불행하게도이다, 내 구성 요소 템플릿에 상주하는 '리'에 'V-에 대한'를 할 노력하고있어 나는 지금까지 (나의 바이올린을보십시오) 작동하지 않는다, 어떤 도움을 시도 했는가? [vue.js의 구성 요소에 데이터를 전달]의

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'] 
    } 
});