vue 组件开发之组件通讯

一、props 父组件向子组件传值

单向数据流！！！

/**
   * 父组件     推荐使用 :activeNumber = "activeNumber" 进行传递 
   * @type      数据类型日常开发
   * @default   默认参数
   * @required  是否必传
   *
   *  */
  props: {
    activeNumber: {
      type: Number,
      default: 0
    },
    activeString: {
      type: String,
      default: ''
    },
    activeBoolean: {
      type: Boolean,
      default: false
    },
    activeArray: {
      type: Array,
      default: () => {
        return []
      }
    },
    activeObject: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

二、$emit() 子组件向父组件传值

 // 子组件  使用this.$emit('父组件函数',值)
 this.$emit('xxx','hello word');
 // 父组件 
 <UploadFiles @xxx='parentEvent'></UploadFiles>
 parentEvent(e){
    console.log(e)
 }

三、props 父子组件数据双向绑定 .sync 修饰符 vue2.3.0+新增的api

// 子组件传递值
this.$emit('update:imgVideoSrc', 'No_photo_or_video_resources');
// 父组件接受值
<UploadFiles :imgVideoSrc.sync="detailsForm.cover_img"></UploadFiles>

四、$children / $parent 通过refs获取父子实例

// 父组件中
<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <com-a></com-a>
    <button @click="changeA">点击改变子组件值</button>
  </div>
</template>

<script>
import ComA from './test/comA.vue'
export default {
  name: 'HelloWorld',
  components: { ComA },
  data() {
    return {
      msg: 'Welcome'
    }
  },

  methods: {
    changeA() {
      // 获取到子组件A
      this.$children[0].messageA = 'this is new value'
    }
  }
}
</script>

// 子组件中
<template>
  <div class="com_a">
    <span>{{messageA}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageA: 'this is old'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.msg;
    }
  }
}
</script>

五、provide/ inject vue2.2.0新增的api

父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。

// parentComponent.vue

<template>
  <div>
	<childComponents></childComponents>
  </div>
</template>

<script>
  import comB from '../components/childComponents.vue'
  export default {
    name: "parentComponent",
    provide: {
      parentComponentData: "demo"
    },
    components:{
      childComponents
    }
  }
</script>

// childComponents.vue

<template>
  <div>
    {{demo}}
    <childComponents></childComponents>
  </div>
</template>

<script>
  export default {
    name: "childComponents",
    inject: ['parentComponentData'],
    data() {
      return {
        demo: this.parentComponentData
      }
    }
  }
</script>

六、$attrs / $listeners‘vue2.4.0新增的api‘升级版的props与$emit()

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs"传入内部组件——在创建‘高级别的组件‘时非常有用。包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

// 父级别
<template>
  <div>
    <children
      :foo="foo"
      :coo="foo"
      v-on:upRocket="reciveRocket"
    >
    </children>
  </div>
</template>
<script>
import children from '@/components/children/children'
export default {
  data () {
    return {
      foo: 'Hello, world',
      coo: 'Hello,rui'
    }
  },
  components: {children},
  methods: {
    reciveRocket () {
      console.log('reciveRocket success')
    }
  }
}
</script>

// 儿级别
<template>
  <div>
    <p>foo:{{foo}}</p>
    <p>attrs:{{$attrs}}</p>
    <grandson v-bind="$attrs" v-on="$listeners"></grandson>
  </div>
</template>
<script>
import grandson from './grandson'
export default {
  name: 'child-dom',
  props: ['foo'],
  inheritAttrs: false,
  components: {grandson}
}
</script>

// 孙级别
<template>
  <div>
    <p>coo:{{coo}}</p>
    <button @click="startUpRocket">我要发射火箭</button>
  </div>
</template>
<script>
export default {
  name: 'childDomChild',
  props: ['coo'],
  inheritAttrs: false,
  methods: {
    startUpRocket () {
      this.$emit('upRocket')
      console.log('startUpRocket')
    }
  }
}
</script>

其他通讯方式

1、EventBus

在实际开发中兄弟组件传参使用（使用频率不是很高）

2、Vuex

官网看一看，瞧一瞧，后面单独拿出来分享模块化vuex ！！！