父子组件通信在vue项目中常常用到，但一段时间不用总会忘记，这次记下来。

一、父组件传给子组件

方法一：

1. 简单，使用props传递数据，父组件调用子组件并传递数据，数据包括属性和方法（String,Number,Boolean,Object, Array ,Function），子组件内用props接收。

2. 例：父组件：

<child :message="hello"></child>      //这里的message就是通信对应的“接口”,hello是父组件内的data或function

对应子组件内:

<script> props:[ 'message' ] </script>

    在子组件内用起来和data一样。

3. 注意：props是单向数据流，父组件属性变化时，会传递给子组件，反过来不会。这是为了防止子组件修改了父组件的状态后，数据流变得难以理解。若强行在子组件内改变props，vue会在控制台给出警告。

如果需要将其值作为局部数据来用或者处理成其他数据输出，那么可以在data中定义变量，用props初始化来使用；若需要处理，可以在computed属性中计算返回使用。

方法二：

1. 通过$on传递父组件方法，直观的表现了子组件主动调用父组件的数据。

2. 例：

父组件：

<template>

<div>

    <h3>父组件</h3>

      <child @childEvent = "parentMethod"></child>  //childEvent作为‘接口’，调用父组件的方法parentMethod

    </div>

</template>

<script>

import child from '@/../child';

  export default{

  components:{child},

data(){

      return{

parentMsg:"来自父组件的消息",

      }

        },

method{

parentMethod(){

alert(this.parentMsg)

}

}

    }

</script>

子组件：

<template>

<div>

    <h3>我是子组件</h3>

    </div>

</template>

<script>

  export default{

mounted(){

this.$emit('childEvent')  //子组件通过emit调用父组件方法，childEvent作为‘接口’连接

}

    }

</script>

二、子组件传给父组件

方法一：$emit触发

1. 通过$emit触发，子组件主动触发父组件事件，同时传递数据。子传父不能像父传子那样直接传递直接接收，需要通过触发事件通知父组件才能传递。

2. 例：

子组件： //子组件名：relationAnalyzeDialog

<template>

<button @click = "dialogFormEvent">取消</button>    //触发通知父组件的方法（有点绕，理解了就好懂）

</template>

<script>

export default{

data(){

return{

dialogFormVisible:false,

}

},

methods:{

    dialogFormEvent(){

    this.dialogFormVisible = false;

      this.$emit('change', this.dialogFormVisible)  //触发change，change是子父组件通信的对应的“接口”， this.dialogFormVisible 为向父组件传递的数据

    }

  }

}

</script>

父组件：

<template>

<relationAnalyzeDialog  @change = "dialogForm"  :msg = "msg"></relationAnalyzeDialog>  //监听子组件触发的change，调用本身的dialogForm方法，并

</template>

<script>

components:{

    relationAnalyzeDialog

  },

  data(){

  return {

dialogFormVisible

}

  }，

  methods:{

  dialogForm(msg){

this.dialogFormVisible = msg;

}

  }



</script>

方法二：refs获取

1. 给子组件添加refs属性，父组件在使用时通过this.$refs.childName....来获取子组件的数据。

2. 相当于父组件主动调用子组件的数据。

PS总结：父组件应处于高位，拥有控制权，对外交互的权利应该交由父组件，所以常用的是 props和 $emit。

下回有心得再补充。