超详细的vue组件间通讯总结

• 前言
  
• 一、props、$emit单向数据流
  
• 二、$parent、$children
  
• 三、$attrs、$listeners
  
• 四、provide、inject
  
• 五、eventBus(变乱总线)
  
• 六、vuex
  
• 七、localstorage
  
• 总结
  

   

• props、$emit   
  
• $parent、$children   
  
• $attrs、$listeners   
  
• provide、inject   
  
• eventBus   
  
• vuex   
  
• 本地存储
  

<template>
  <div>
    <div>我是父亲：<input type="button" value="父亲" /> 数字为： {{num}}</div>
    <son :num="num" @change="change"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  name: "Father",
  components: {
    son,
  },
  data() {
    return {
      num: 1,
    };
  },
  methods:{
    change(val){
      this.num = val
    }
  }
};
</script>
复制代码

<template>
  <div>我是儿子：<input type="button" value="儿子" @click="change"/>数字为：{{num}}</div>
</template>

<script>
export default {
  name: "App",
  components: {},
  props: {
    num: {
      default: 0,
    },
  },
  created() {},
  methods: {
    change(){
      // this.num = 2  props通信是单向数据流，在这直接修改父组件传过来的num将会报错　　　　// 可以用$emit触发change事件，father组件绑定change事件　　　　this.$emit('change', 2)
    }
  },
};
</script>
复制代码

father:
<son :num="num" @change="val => num = val"></son>

son:
this.$emit('change', 2)
复制代码

father:

<son :num.sync="num"></son>

son:

this.$emit('update:num', 2)//update是规定的写法,不可更换
复制代码

father：<son :value="num" @input="val => num = val"></son>son：this.$emit('input', 2) 
可用v-model简写：<son v-model="num"></son>
复制代码

$parent
复制代码

$children
复制代码

<div>我是儿子：<input type="button" value="儿子" @click="change"/>数字为：{{$attrs}}</div>
复制代码

<son v-bind="$attrs"></son>
复制代码

<template>
  <div>
    <div>我是祖父: 数字为：{{nums}}</div>
    <father :nums="nums" @up="up" @down="down"></father>
  </div>
</template>

<script>
import father from "./father.vue";
export default {
  name: "App",
  components: {
    father,
  },
  data(){
    return {
      nums:0
    }
  },
  methods: {
    up() {
      alert('up')
    },　　down() {　　　alert('down')　　},
  },
};
</script>
复制代码

<son v-bind="$attrs" v-on="$listeners"></son>
复制代码

<div>我是儿子：<input type="button" value="儿子" @click="$listeners.up"/></div>
复制代码

...

export default {
  provide(){
    return {vm: this}
  },

...
复制代码

...

export default {
  inject: ['vm'],　data(){},　mounted(){　　console.log(this.vm) }

...
复制代码

Vue.prototype.$bus = new Vue();
复制代码

<template>
  <div>
    <son1></son1>
    <son2></son2>
  </div>
</template>

<script>
import son1 from './son1.vue'
import son2 from './son2.vue'
export default {
  name: 'parent',
  components: {
    son1,
    son2
  },
  created(){
     this.$bus.$on('busEvent',(v)=>{
      console.log(v);
    })
  },
  beforeDestroy(){
    this.$bus.off('busEvent')
  }
}
</script>
复制代码

son1:mounted(){
  this.$bus.$emit('busEvent','son1哈哈')
}son2:mounted(){  this.$bus.$emit('busEvent', 'son2嘻嘻')}
复制代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isLogin: false
  },
  mutations: {
    loginState (state, isLogin) {
      state.isLogin = isLogin
    }
  }
})

export default store
复制代码

created(){
  this.$store.commit('loginState',true)// 设置登录状态为true
},
复制代码

<template>
  <div>我是儿子：<input type="button" value="儿子" />登录状态:{{isLogin}}</div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: "son",
  computed:{
    ...mapState(['isLogin'])
  }
};
</script>
复制代码

created(){
  localStorage.setItem('isLogin', true)
},
复制代码

computed:{
  isLogin(){
    return localStorage.getItem('isLogin')
  }
}
复制代码