Vue 组件通信(双向绑定)
2017-02-08 本文已影响102人
伍源辉
<div id="app">
<child :app="app" @on-app-change="onAppChange"></child>
<button @click="appMethod">{{ app }}</button>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script type="application/javascript">
Vue.component('child', {
template: '<button @click="childMethod">{{ app }}</button>',
props: ['app'],
data: function () {
return {
// 外部属性只读不可写,增加中间变量
myApp: this.app
};
},
watch: {
// 监听外部属性的变化
app(val) {
this.myApp = val;
},
// 中间变量改变向上传递通知
myApp(val) {
this.$emit("on-app-change", val);
}
},
methods: {
// 改变中间变量值
childMethod: function(){
this.myApp++;
}
},
})
new Vue({
el: '#app',
data: {
app: 0
},
methods: {
appMethod: function () {
this.app++;
},
// 定义方法,用于接收子组件中的通知
onAppChange(val) {
this.app = val;
}
}
})
</script>