Vue组件通信方式
文章目录
一.组件之间的通信方式
两个组件或者多个组件进行一些数据传递等操作
1.组件关系
组件关系的确定不是在定义时,而是在调用时确定的
<div id="app">
<!-- 调用parent组件 -->
<parent></parent>
</div>
// 定义一个名为 parent的组件
Vue.component('parent', {
//这里使用了son组件,才可以确定这两个组件的关系,son是parent的子组件
template:
`<div>
<p>parent</p>
<son></son>
</div>`
})
//定义一个名为son的组件
Vue.component('son',{
template:
`<div>
<p>son</p>
</div>`
});
//根组件
var vm = new Vue({
el: '#app'
});
上面组件的关系是,只有在调用的时候,才可以确定,根组件是最顶级的, root>parent>son 这样关系就确定了
2.组件通信
1.父组件通信子组件 父->子
父组件通信子组件,一般都是使用props,通过自定义属性的形式传递参数到子组件
<div id="app">
<parent></parent>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component('parent', {
//父通子 使用属性的方式,向下传递给子组件
template: `
<div>
我是父组件
<son :parms='msg'></son>
</div>
`,
data() {
return {
msg: '父组件向子组件传递过来的数据'
}
}
});
//子组件通过props接收
Vue.component('son', {
props: {
parms: {
type: String,
required: true
}
},
template: `
<div>
我是子组件
<h1 v-text='parms'></h1>
</div>
`,
});
const vm = new Vue({
el: '#app'
});
</script>
2.子组件通信父组件 子->父
子组件通信父组件,一般是使用 emit触发)
<div id="app">
<parent></parent>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component('parent', {
//子通父,使用自定义事件回传数据 $emit(在子组件中使用)
template: `
<div>
我是父组件
<son @change='handle'></son>
<h1 v-text='abc'></h1>
</div>
`,
data(){
return{
abc:'123'
}
},
methods:{
handle(value){
this.abc=value;
}
}
});
//子组件通过$emit传递到父组件
Vue.component('son', {
data(){
return {
msg: '子组件向父组件传递过来的数据'
}
},
template: `
<div>
我是子组件
<h1></h1>
<button @click="sonHandle">点我,向父组件传值</button>
</div>
`,
methods:{
sonHandle(){
this.$emit('change', this.msg)
}
}
});
const vm = new Vue({
el: '#app'
});
</script>
3.兄弟之间通信 兄->弟 弟->兄
兄弟组件通信方式,也就是非父子的通信,兄弟组件通信可以使组件之间相互操作,相互联动
1.最简单的方式:找他们的爹(状态提升)
<div id="app">
<child-one @change="handle"></child-one>
<child-two :msg='msg'></child-two>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//要实现兄弟组件的通信 child-one=====>child-two
Vue.component('child-one', {
template: `
<div>
<h1>我是子组件一号</h1>
<button @click='handle'>我要向子组件二号传递值</button>
</div>
`,
data(){
return{
oneWorld: '我是来自子组件一号'
}
},
methods: {
handle() {
//通过$emit 回传给父组件
this.$emit('change', this.oneWorld);
}
}
});
Vue.component('child-two', {
//接收父组件传递过来的参数
props: {
msg:String
},
template: `
<div>
<h1>我是子组件二号</h1>
<span>我是子组件一号传递过来的参数:</span><span v-text='msg'></span>
</div>
`
});
const vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
//父组件接收子组件回传的参数
handle(value) {
this.msg = value;
}
}
});
</script>
上面的这种实现的方式就是通过状态提升,也是最简单粗暴的方式,原理就是找他们的爹,然后他爹在传给另个子组件
要实现兄弟组件的通信 child-one=====>child-two
实现流程是: 父组件的方法中监听一个接收子组件(child-one)回传的参数函数, 然后在页面中,通过自定义事件,传递给子组件(child-one)所监听的函数.再使用$emit 把需要传递给child-two组件的数据回传给父组件 , 父组件得到之后,通过props传参形式直接给child-two组件,child-two去接收,然后再使用,这里就实现了一个兄弟组件的通信.
2.中央事件管理器(中央事件总线)
亲兄弟之间或者关系特别复杂的组件之间
<div id="app">
<child-one></child-one>
<child-two></child-two>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//要实现兄弟组件的通信 child-one=====>child-two
//创建一个事件总线
const bus = new Vue();
Vue.component('child-one', {
template: `
<div>
<h1>我是子组件一号</h1>
<button @click="handle">我要向子组件二号传递值</button>
</div>
`,
data() {
return {
oneWorld: '我是来自子组件一号',
twoWorld: '我是来自子组件一号的第二个参数',
}
},
methods: {
handle() {
bus.$emit('change', this.oneWorld, this.twoWorld);
}
}
});
Vue.component('child-two', {
template: `
<div>
<h1>我是子组件二号</h1>
<span>我是子组件一号传递过来的参数:</span>
<span v-text='msg1'></span>
<span v-text='msg2'></span>
</div>
`,
data() {
return {
msg1: '',
msg2: ''
}
},
//在组件生命周期的created阶段,监听自定义事件
created() {
var _this = this;
/*
bus.$on(event, callback)
event 监听的事件
callback 事件触发时的回调函数
*/
bus.$on('change', function (value1, value2) {
_this.msg1 = value1;
_this.msg2 = value2;
})
}
});
const vm = new Vue({
el: '#app'
});
</script>
这是一个通过事件总线的方式来实现兄弟组件通信的,一般如果没有用到Vuex全局状态管理器的话,使用这个方式,是比较推荐的,
实现流程是:
1. 先创建一个空的vue实例对象。也就是不需要额外配置什么选项。
const bus = new Vue()
2. A B 两个组件，A 通信 B
1. 先在 B 组件的 created 中去通过 bus 来监听一个自定义事件
bus.$on(eventName, callback)
eventName 要监听的事件的名字
callback 事件触发时的一个回调函数
payload 事件触发时传递过来的 payload 参数
2. 在 A 组件的某个时候去触发自定义事件
bus.$emit(eventName, payload)
eventName 要触发的事件的名字
payload 触发事件时传递过去的参数