vue子父组件通信

子父组件传递数据

1. 父组件===》子组件。父组件通过props向子组件中传递数据和改变数据的函数，通过在子组件中调用父组件传过来的函数，达到更新父组件数据（向父组件传递数据）的作用（子组件中需要有相应的响应事件）.

2. 子组件===》父组件。通过在子组件中触发一个 自定义事件（vm.emit方法的参数，回传给父组件用v-on：[自定义事件]监听的函数.如：

<!--父组件  -->
<template>
  <div class="container">
      <child-template @toggleFn="myToggle"></child-template> <!--子组件 -->
    </div>
</template>
myToggle(params ){
  console.log(params);
}

<!--子组件 --> 
<template>
  <div class="container">
      <div @click="toggle">点击子组件</div>
    </div>
</template>
toggle(){
let params = "传递参数";
  this.$emit("toggleFn",params)
}

3.通过ref对子组件做标记，父组件可以通过this.﹩refs.[子组件的ref].[子组件的属性/方法]这种方式直接取得子组件的数据或者调用方法
如this.﹩ref.mark.data ，this.﹩ref.mark.fun();

父子组件实时传递数据

1.父组件通过通过props 给子组件传递对象 数据，子组件再以函数的形式接收，当子组件数据改变时，父组件也会相应改变，如：

<!--父组件  -->
<template>
  <div class="container">
      <child-template :data="myData"></child-template> <!--子组件 -->
     {{myData.name}}
  </div>
</template>
data() {
    return {
      myData:{
          name:"小明"
     }
   }
}

<!--子组件 -->
<template>
  <div class="container">
      <div @click="toggle">{{data.name}}</div>
    </div>
</template>

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
         },
    },
    data() {
        return {
            name:小刚,
        }
    },
    methods:{
        toggle(){
            data.name = name；
        }
    }
}