將數據從Vue實例傳遞到Vue組件

Question

如何將數據從Vue實例傳遞到Vue組件？ 我正在嘗試對駐留在組件模板中的“ li”進行“ v-for”操作，這是小提琴

的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腳本

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

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

不幸的是，到目前為止，我已經嘗試了什么（請參見我的小提琴），但是沒有任何幫助嗎？

Answer 1

如果您的應用程序越來越大，您也可以考慮使用vuex

Answer 2

我更新了我的代碼

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