Vue组件通信的六种方法
组件通信在vue中十分重要，在这里先给大家介绍六种，之后也会慢慢补充
目录
1. 父组件将动态数据传递给子组件，父组件更改数据子组件接到的数据也会变化
2. 父组件将自己的方法传递给自组件，子组件调用方法传数据给父组件
3. 父组件给子组件绑定事件
4. ref通信
5. 使用event bus事件总线
6.使用$root,$parent,$children
1. 父组件将动态数据传递给子组件，父组件更改数据子组件接到的数据也会变化
注意：父组件和子组件并不是共用同一个数据，而是父组件将自己的数据复制了一份传给子组件，父组件数据变化时都会重新传值dom也会重新渲染 但子组件不能去直接修改父组件的值
app
{{message}}
{{message}}
Vue.component('app-father',{
template:'#app-father',
data(){
return{
message:''
}
}
})
Vue.component('app-son',{
template:'#app-son',
props:['message'] // 自组件利用props属性接收数据
})
new Vue({
el:'#app'
})2. 父组件将自己的方法传递给自组件，子组件调用方法传数据给父组件
app
app-fatehr
{{money}}
app-son---{{money}}
Vue.component('app-father',{
template:'#app-father',
data(){
return {
money:100
}
},
methods:{
giveMoney(money){
this.money-=money
}
}
})
Vue.component('app-son',{
template:'#app-son',
props:['getMoney'], // 接收的是一个方法
data(){
return{
money:0
}
},
methods:{
get(){
this.getMoney(10) // 调用时可以传参数也可以不传 使用this是因为接收了 就相当是自己的方法了
this.money+=10
}
}
})
new Vue({
el:'#app'
})3. 父组件给子组件绑定事件
事件的处理程序就是父组件的方法，自组件使用$emit调用方法的时候可以传数据给父组件，子组件不需要接收 直接是用$emit来触发函数 参数跟在后面
app
app-fatehr
{{money}}
app-son---{{money}}
Vue.component('app-father',{
template:'#app-father',
data(){
return {
money:100
}
},
methods:{
giveMoney(money){
this.money-=money
}
}
})
Vue.component('app-son',{
template:'#app-son',
data(){
return{
money:0
}
},
methods:{
get(){
this.$emit('get-money',10) // 后面跟传递的参数
this.money+=10
}
}
})
new Vue({
el:'#app'
})4. ref通信
ref 和 关系链 组件可以利用ref为自己的dom做出独有的标记，利用this.$refs来获得从而进行操作
Vue.component('app-father',{
template:'#app-father',
data(){
return{
message:'hello vue.js'
}
}
})
new Vue({
el:'#app',
methods:{
get(){
this.$refs.kids.forEach(element => { // 这时的kids是一个数组
console.log(element.message)
});
}
}
})5. 使用event bus事件总线
这个知道的人没有很多 但是也比较简单 也很重要
// 使用event bus 事件总线来传递数据
var bus = new Vue()
Vue.component('app-father',{
template:'#app-father',
methods:{
hint(){
bus.$emit('son-toCry') // 触发bus上绑定的son-toCry函数
}
}
})
Vue.component('app-son',{
template:'#app-son',
methods:{
cry(){
console.log('wuwuwuwu.........')
}
},
// 在初始化的时候绑定事件
mounted(){
bus.$on('son-toCry',()=>{
this.cry()
})
}
})
new Vue({
el:'#app'
})6.使用$root,$parent,$children
在每一个组件的实例身上，都有$root,$parent,$children来指向最外面成根实例、父组件实例、子组件实例们，所以，理论上来说，因为存在一条关系链，所以任意的组件都能找到除了它之外的任意的组，/这样的话我们就可以进行任意的通信,更改数据、调用方法。但是，不要这么做，因为组件的作用域应该都是独立的
比如，数据放在子组件身上，让父组件去改，这种思路本身就是不科学的，所以应该数据放在父组件身上，父组件把数据传递给子组件，父组件更改数据的时候，子组件也就改了
Vue.component('app-father',{
template:'#app-father',
data(){
return {
message:'father'
}
},
methods:{
get(){
console.log(this)
console.log(this.$children[0].message) // console.log(son)
}
}
})
Vue.component('app-son',{
template:'#app-son',
data(){
return {
message:'son'
}
},
methods:{
get(){
console.log(this)
console.log(this.$parent.$parent.message) // console.log(app)
}
}
})
new Vue({
el:'#app',
data:{
message:'app'
},
methods:{
get(){
console.log(this)
console.log(this.$children[0].message) // console.log(father)
}
}
})