将数据从Vue实例传递到Vue组件

时间:2016-10-18 07:29:50

标签: javascript vue.js vue-component

如何将数据从Vue实例传递到Vue组件?我正在尝试对位于我的组件模板中的'li'执行'v-for',这是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脚本

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

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

不幸的是,到目前为止我尝试了什么(看到我的小提琴)是行不通的,请帮忙吗?

2 个答案:

答案 0 :(得分:0)

我更新了我的代码

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

答案 1 :(得分:0)

如果您的应用程序变大,您也可以考虑使用vuex