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

Posted

技术标签:

【中文标题】将数据从 Vue 实例传递到 Vue 组件【英文标题】:Pass the data from Vue instance to the Vue component 【发布时间】:2017-02-27 08:47:05 【问题描述】:

如何?我正在尝试对驻留在我的组件模板中的“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']
    
);

不幸的是,到目前为止我尝试了什么(见我的小提琴)都不起作用,请帮忙?

【问题讨论】:

Passing data to components in vue.js的可能重复 【参考方案1】:

如果你的应用变大,你也可以考虑vuex

【讨论】:

【参考方案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']
    
);

【讨论】:

以上是关于将数据从 Vue 实例传递到 Vue 组件的主要内容,如果未能解决你的问题,请参考以下文章

如何将数据从 Vue 实例传递到 Vue.component?

如何将数据从 Vue 实例传递给嵌套组件

如何将数据从 Vue 实例传递给嵌套组件

将 Vue 根实例中的 prop 传递到刀片模板文件中的组件中

vue使用template注册组件,组件怎么获得实例数据

将刀片文件中的数据直接传递给 Vue 实例