vue父子组件之间的通信方式

1.子组件使用props接受父组件传递的数据

//父组件
<template>
  <div>
    <child :parentData="parentData"></child>
  </div>
</template>
 
<script>
import child from './child';
export default {
  components: { child },
  data() {
    return {
      parentData: 'parentData'
    };
  }
};
</script>

//子组件
<template>
  <div>{{ parentData }}</div>
</template>
 
<script>
export default {
  props: ['parentData']
};
</script>

注意：
1）props的传递是单向的，不要在子组件直接修改props的值，如果非要进行修改，可以在子组件的data中复制一份props的值，然后对data的值进行修改
2）props可接受的数据如下：

//接受数据本身
props: ['refName']
//接受数据+默认值
refName: {
  type: Number,
  default: 0
}
refName: {
  type: String,
  default: ''
}
refName: {
  type: Boolean,
  default: false
}
refName: {
  type: Array,
  default:{
     return []
  }
}
refName: {
  type: Object,
  default: ()=>({})
}
refName: {
  type: Function,
  default: ()=>()=>{}
}
//数据+默认值+限制必要性
refName: {
  type: Object,
  required: true,
  default: ()=>({})
}

2.使用$emit将子组件的数据传到父组件

//子组件
<template>
  <div>
    <button @click="emitData"></button>
  </div>
</template>
 
<script>
export default {
  methods: {
    emitData() {
      this.$emit("child", childData);
    }
  }
};
</script>

//父组件
<template>
  <div>
    <child @child="getChildData"></child>
  </div>
</template>
 
<script>
import { child } from './child';
export default {
  components: { child },
  methods: {
    getChildData(childData) {
      // childData 就是子组件传递过来的数据
    }
  }
};
</script>

3.子组件中使用$parent调用父组件的方法

//子组件
<child @click="handleParent">点击获取父组件数据或方法</child>

handleParent(){
  let parent = this.$parent //获取父组件实例
  console.log(parent.parentData) //访问父组件属性
  parent.parentFn() //调用父组件的方法parentFn()
}

4.父组件使用$refs获取子组件中的数据或调取子组件的方法

//子组件
<Children ref="children"></Children>

//父组件
<button @click="handleChild">点击获取子组件数据或方法</button>

handleChild() {
  let child = this.$refs.children//获取子组件实例
  console.log(child.data);//访问子组件属性
  child.childFn() //调用子组件的childFn()方法
},