关于vue.js父子组件数据传递
vue.js中使用props down，events up的原则进行父子组件间的通信，先来记录下props down，看个例子：
<div id="app2">
<child message="hello!"></child>
</div>
...
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
new Vue({
el:"#app2"
});以上定义了一个全局组件child，在app2的父级作用域中使用时，child组件定义了一个message属性，这样父组件在使用子组件的地方直接通过给child的message属性赋值即可将该值传递到子组件内部，从而输出模板内容：hello!，这里的“hello!”字符串是固定的，如果我们想传入的是app2作用域中的动态数值可以使用如下方式：
<div id="app2">
<child v-bind:message="parentMsg"></child>
<input v-model="parentMsg">
</div>
...
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
new Vue({
el:"#app2",
data:{
parentMsg:""
}
});这样的话，子组件中的message值完全来自于父组件中的data.parentMsg，父组件的数据操作直接更新到子组件中。
再来看下events up的实例：
<div id="counter-event-example">
<p>{{ total }}</p>
<!-- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件，也就是这里的$.emit("increment")事件 -->
<button-counter v-on:increment2total="incrementTotal"></button-counter>
<button-counter v-on:increment2total="incrementTotal"></button-counter>
</div>
...
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment2total',{"admin":"############"})
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function (value) {
alert(JSON.stringify(value));
this.total += 1
}
}
})子组件模板中声明click事件，调用自身methods方法increment，increment里面通过$emit形式抛出一个事件到对应的子组件:on那里，查找到对应的父组件调用方法为incrementTotal，则直接调用该方法并传递参数。
关于vue.js后续一些学习心得体会均会在此处分享，一步步慢慢学吧。。。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-03-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读