将数据从 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
<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?