Vue的父子通讯

在vue中，其中一个重要的通信就是父子通讯，父子之间的设置又随着情况而不同。其中最常见的就是父组件为控制组件，子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。

父组件到子组件通讯

父组件到子组件的通讯主要为：子组件接受使用父组件的数据，数据包括属性和方法（String,Number,Boolean,Object,Array,Function）.通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数。

通过props传递数据

props传递数据即父组件调用子组件并传入数据，子组件接受到父组建传递的数据进行验证使用。
如下图：我在主页面调用显示新建规则对话框组件,需要在Script部分import进来该组件，并且注册component，然后在调用显示的模块里监听该父组件的值

<template>
  <div>
  <h2>主页面</h2>
    <add-rules-dialog
      v-if="addRulesOnoff" 
      :dialog-form-visible="addRulesOnoff"
    >
        </add-rules-dialog>
  </div>
</template>
<script>
import AddRulesDialog from ...//此处填写您的组件路径
...
export default {
  components: {
  AddRulesDialog
}，
  data() {
    return{ 
      addRulesOnOff
        }，
  method: {	
  addRules() {
        this.title = '创建报警规则'
        this.addRulesOnoff = true   
        this.isClickOnModal = false
        this.rowEditOnoff = false
        this.rowOnoff = false
        this.isRead = false
        this.isReadonly = false
      }
</script>

在子组件中定义props数据,如下：

props: {
  rules: {
    type: Object,
    default: () => {},
  },
},

通过$on 传递父组件方法

$on传递父组件方法与props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表示出调用关系。

子组件到父组件通讯

通过$emit传递父组件数据
与父组件到子组件通讯中的$on配套使用，可以向父组件中触发的方法传递参数供父组件使用。

通过refs获取
可以通过在子组件添加ref属性，然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和this.$parent一样并不属于数据的传递而是一种主动的查找。
尽量避免使用这种方式。因为在父子组件通信的过程中。父组件是处于高位是拥有控制权，而子组件在多数情况下应该为纯视图组件，只负责视图的展示和自身视图的逻辑操作。对外交互的权利应该由父组件来控制。所以应当由父组件传递视图数据给子组件，子组件负责展示。而子组件的对外交互通过$emit触发父组件中相应的方法，再由父组件处理相应逻辑。

<template>
  <div>
    <h2>父组件</h2>
    <br>
    <Child-one ref="child"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    mounted(){
      console.log(this.$refs['child']);
    },
  };
</script>
<style scoped>
</style>

this.$refs['child']