vue - 组件间的通信方式

方式一：prop数据传递

//  parent 
<child :data="parentData"></child>

// child
  props:[
    'data'
  ]

方式二：自定义事件$emit 。

　　　　* v-bind:title.sync  :  在V3已被启用。使用v-model传入组件值。

一：v-bind:title.sync  在子组件里改值，父组件跟着变。
// parent 
    <child v-bind:title.sync="testTit" @mine-event="doSomething"></child>
　　
　　data(){
　　　　return {
　　　　　　testTit: '测试'
　　　　}
　　},
    methods:{
        doSomething(data) {
          console.log(data)
        }
     }

//child
　　<input @change="childEvent" v-model="titleChild" />
　　props:[
　　　　'title'
　　],
data:{
　　titleChild: this.title
},
    methods: {
        childEvent() {
          this.$emit('mine-event',{test:'测试'})
　　　　　　this.$emit('update:title': this.titleChild) //
        }
    }

二，v-model：

方式三：边界情况，不常用。无法扩展到更深层次的组件。

　　　　访问根实: this.$root   / 访问父组件：this.$parent.title / 访问子组件:  this.$refs['childref'] 。

方式四：依赖注入。provide ，reject。可扩展到深层次嵌套组件。使用过多不易维护。

//parent
provide:function() {
    return {
      getParent1: this.parentMethod1,
      getParent2: this.parentMethod2
    }
  },
  methods:{
    parentMethod1() {
      console.log('1')
    },
    parentMethod2() {
      console.log('2')
    }
  },

//child
<template>
  <div>
    <span @click="childEvent">事件通信</span>
    <child-item></child-item>
  </div>
</template>
<script>
import ChildItem from './childItem'
export default {
  components:{
    ChildItem
  },
  inject:[
    'getParent1'
  ],
  methods: {
    childEvent() {
      this.getParent1()
    }
  },
}
</script>

//childItem
<template>
  <div>
    <span>孙子组件</span>
  </div>
</template>
<script>
export default {
  inject:[
    'getParent2'
  ],
  created() {
    this.getParent2()
  },
}
</script>

方式五：slot 插槽。往子组件中动态添加标签等。

方式六：vuex 状态管理。