vue组件之间通信几种方法

javaScript

组件之间通信几种方法

跨组件【订阅/发布】模式

描述:vue2.0支持

var bus = new Vue(); //把值发送指定频道 bus.$emit('fcName',1) //接收指定频道的值 bus.$on('fcName',function(id){ console.log(id); });

通过prop向子组件通信

<div id="app"> <p>{{ total }}</p> <button type="button" @click="clickRef">调用子组件</button> <child :message="total"></child> </div>

message前加":" total是动态数据,未加total是静态数据

Vue.component('child',{ template:'<div>全局组件:{{ message }}</div>', props: { //允许值类型,用数组表示 message: [String, Number] } }); var vm = new Vue({ el: '#app', data: { total: 1 }, methods: { clickRef: function(){ this.total++; } } });

子组件调用父组件

<div id="app"> <p>{{ total }}</p> <simple @increment = "parentFn"></simple> </div>
//定义全局组件 Vue.component('simple',{ template: '<button @click="fns">子组件click</button>', methods: { fns: function(){ this.$emit('increment'); } } }); var vm = new Vue({ el: '#app', data: { total: 1 }, methods: { //在子组件调用emit() 来触发。 parentFn: function(){ this.total++; } } });

备注:该方式主要通过子组件emit()方法来实现。

父组件调子组件方法和数据

<div id="app"> <p>总次数:{{ total }}</p> <button @click="parentClick">调子组件</button> <simple ref="children"></simple> </div>
//定义全局组件 Vue.component('simple',{ template: '<button @click="fns">子组件次数({{ num }})</button>', data: function(){ return { num: 0} }, methods: { fns: function(){ this.num++; } } }); //实例化Vue对象 var vm = new Vue({ el: '#app', data: { total: 1 }, methods: { //在子组件调用emit() 来触发。 parentClick: function(){ this.total++; var child = this.$refs.children; child.fns(); } } });

使用v-model进行通信

Vue.component('my-component', { template: `<div>{{currentVal}}这是:,<button @click="foo">传递</button></div>`, props: ['value'], // 必须 data() { return { currentVal: this.value // 必须 } }, // 必须 watch: { currentVal(val) { this.$emit('input', val) }, value(val){ this.currentVal = val } }, methods: { foo() { this.currentVal++ }, }, }) var appMain = new Vue({ el: '#app', data: { num: 3, }, methods: { clickMe() { this.num ++ } } })

html

<div id="app"> <p>总次数:{{ total }}</p> <button @click="parentClick">调子组件</button> <simple ref="children"></simple> </div>

vuex