前言:
上面知识点的学习,让我们知道了, 数据在组件间的传递,
- 父组件通过
props属性将数据传递给子组件, - 子组件通过
自定义事件将数据传递给父组件
那么问题来了,两个组件不是父子关系的组件,不是父子关系的 组件也可能有两种情况:
- 一种是两个组件是有一个共同父组件的兄弟关系组件,
- 第二种是两个组件之间没有太大的关系, 甚至要向上追溯好几层才能找到共同的祖先组件.
那么我们就来看看这两种情况,如何处理数据传递
1. 兄弟关系数据传递
兄弟关系拥有一个共同的父组件, 那么也就是说我们可以在父组件上定义一个数据,假如这两个组件的名称分别为A组件和B组件, 如果希望子组件A的数据传递给B组件,
那么我们可以先将子组件A的数据通过自定义事件将数据传递给父组件, 然后父组件再通过props将数据传递给B组件, 这样我们就达到了将A组件的数据传递给B组件的目标
示例: 将上面todoList示例拆分成两个组件
<div id="app">
<!-- 使用组件 -->
<first-component @addcomment="addComment"></first-component>
<second-component
:comments="comments"
@deletecomment="deleteComment"
></second-component>
</div>
<!-- 组件模板 -->
<template id="firstComponent">
<div>
<input type="text" v-model="comment">
<button @click="handleClick">点击评论</button>
</div>
</template>
<template id="secondComponent">
<ul>
<li v-for="comment,index in comments" :key="index">
<span>{{comment}}</span>
<button @click="deleteClick(index)">X</button>
</li>
</ul>
</template>
<script>
// 组件选项对象
let firstComponent = {
template: `#firstComponent`,
data(){
return {
comment: ''
}
},
methods: {
handleClick(){
let comment = this.comment.trim();
if(!comment)return
this.$emit("addcomment", comment);
this.comment = ''
}
}
};
let secondComponent = {
props:["comments"],
template: `#secondComponent`,
methods:{
deleteClick(index){
this.$emit("deletecomment",index)
}
}
}
// 实例中注册组件
const vm = new Vue({
el:"#app",
data:{
comments: []
},
components: {
secondComponent,
firstComponent,
},
methods:{
addComment(value){
this.comments.push(value)
},
deleteComment(index){
this.comments.splice(index,1)
}
}
})
</script>
利用父组件来处理兄弟组件间的数据传递
2. Bus/总线/发布订阅模式
用于解决平级组件或者跨级组件之间的通信,因为如果全部用父子组件通信,有的不是父子组件就很繁琐,
所以我们利用一个公共的vue实例订阅和发布事件来达到不是父子组件间的通信
其实就是利用$emit()方法触发自定义事件 和 $on() 监听自定义事件,给自定义事件添加事件处理函数
示例: 修改todoList
<template id="firstComponent">
<div>
<input type="text" v-model="comment">
<button @click="handleClick">点击评论</button>
</div>
</template>
<template id="secondComponent">
<ul>
<li v-for="comment,index in comments" :key="index">
<span>{{comment}}</span>
<button @click="deleteClick(index)">X</button>
</li>
</ul>
</template>
<script>
// 定义一个负责通信的公共vue实例,除了负责组件之间的通信,没有任何实际意义
let eventBus = new Vue();
// 组件选项对象
// 组件一
let firstComponent = {
template: `#firstComponent`,
data(){
return {
comment: ''
}
},
methods: {
handleClick(){
let comment = this.comment.trim();
if(!comment)return
eventBus.$emit("addcomment",comment)
this.comment = ""
}
}
};
// 组件二
let secondComponent = {
template: `#secondComponent`,
data(){
return {
comments: []
}
},
// 创建组件的时候,监听自定义事件
// 注意函数中的this
created(){
eventBus.$on("addcomment", (comment) =>{
this.comments.push(comment)
})
},
methods:{
deleteClick(index){
this.comments.splice(index,1)
}
}
}
// 实例中注册组件
const vm = new Vue({
el:"#app",
components: {
secondComponent,
firstComponent,
}
})
</script>
通过示例我们机会发现,我们不需要每次都将数据传来传去, 变得复杂.
发布/订阅模式很好的帮我们处理了非父子组件间的数据传递.
但是回头在思考一下, 我们需要每次都实例化一个vue来作为我们的总线吗?其实不需要, 如果每次都创建vue实例反而不好, 因为帮我们处理发布/订阅模式的总线一个就好, 那么我们可以如何处理呢,
其实我们可以将这个总线的vue实例绑定在Vue原型上, 这样在每个vue实例上都可以使用这个总线,
修改示例: 将这个用来处理传递数据的的vue实例,绑定到Vue构造函数的原型上
<div id="app">
<!-- 使用组件 -->
<first-component></first-component>
<second-component></second-component>
</div>
<!-- 组件模板 -->
<template id="firstComponent">
<div>
<input type="text" v-model="comment">
<button @click="handleClick">点击评论</button>
</div>
</template>
<template id="secondComponent">
<ul>
<li v-for="comment,index in comments" :key="index">
<span>{{comment}}</span>
<button @click="deleteClick(index)">X</button>
</li>
</ul>
</template>
<script>
// 将作为总线的vue实例绑定到构造函数上
Vue.prototype.bus = new Vue();
// 组件选项对象
// 组件一
let firstComponent = {
template: `#firstComponent`,
data(){
return {
comment: ''
}
},
methods: {
handleClick(){
let comment = this.comment.trim();
if(!comment)return
this.bus.$emit("addcomment",comment)
this.comment = ""
}
}
};
// 组件二
let secondComponent = {
template: `#secondComponent`,
data(){
return {
comments: []
}
},
// 创建组件的时候,监听自定义事件
// 注意函数中的this
created(){
this.bus.$on("addcomment", (comment) =>{
this.comments.push(comment)
})
},
methods:{
deleteClick(index){
this.comments.splice(index,1)
}
}
}
// 实例中注册组件
const vm = new Vue({
el:"#app",
components: {
secondComponent,
firstComponent,
}
})
</script>
除了以上$on监听事件外, 还有两个处理事件的方法:$once和$off.
$once的行为与$on一样, 只不过是绑定的事件监听器只会执行一次, 在事件第一次触发完毕后会自动解除事件绑定
$off 方法则是用于移出一个事件监听器.
3. ref在组件上使用(利用ref处理父子通信)
之前我们讲过ref在普通的DOM元素上使用,获取的是DOM元素,但是如果ref在组件上使用,获取的是组件的实例,
通过ref,我们就可以实现在父组件中调用子组件的方法
<div id="app">
<loading ref="load"></loading>
</div>
<template id="myalert">
<div>
<h2 v-show="flag">加载中...</h2>
</div>
</template>
<script>
const loading = {
data() {
return { flag: true }
},
template: '#myalert',
methods: {
hide() {
this.flag = false;
}
}
};
var vm = new Vue({ // 根实例
el: '#app',
data: {
},
components: {
loading
},
mounted() {
// console.log(this.$refs.load)
setTimeout(() => {
this.$refs.load.hide()
}, 2000)
}
});
</script>
