1. 引言

1.1 编写目的

记录父组件与子组件的交互

1.2 背景介绍

父组件与子组件的交互包括四方面：
1）父组件向子组件传值；
2）父组件向子组件传递方法；
3）子组件向父组件传值；
4）子组件向父组件传递方法；

1.3 适用范围

开发人员。

1.4 参考资料

2. 父组件向子组件传值

父组件向子组件传值：父组件在引用子组件的时候，通过属性绑定(v-bind)的形式，把数据传给传递给子组件

<template>
  <div>
    <h1>测试父组件向子组件传值，这是父组件</h1>
    <!-- 1.父组件向子组件传值：父组件在引用子组件的时候，通过属性绑定(v-bind)的形式，把数据传给传递给子组件 -->
    <Son v-bind:fatherObj="father"/>
  </div>
</template>


<script>
import Son from "./Son.vue";
export default {
  components: {
    Son
  },
  data () {
    return {
      father: {
        id: 1,
        name: '父亲：张三'
      },
    }
  },
  methods: {
    changeName (newName) {
      console.log("调用父组件方法fatherFn");
      this.father.name = newName
    }
  },
}
</script>

子组件接收父组件传来的值：子组件使用props属性接收

<template>
  <div>
      <h2>测试父组件和子组件传值，这是子组件</h2>
      <p>我调用父组件中数据:{{fatherObj.name}}</p>
  </div>
</template>


<script>


export default {
  // 1. 父组件向子组件传值：子组件使用props属性接收
  props: ['fatherObj'], // 父组件传来的，只读
  components: {
  },
  data() {
    return {
      
    }
  },// 自带的，可读可写
  computed: {
  },
  watch: {},
  methods: {
    // 当点击子组件的时候，this.$emit()拿到父组件传过来的方法，并调用方法
    fatherFn(){
      console.log(this);
      this.$emit('func','李四')
    }
  },
}
</script>

3. 父组件向子组件传递方法

vue不建议子组件中直接修改父组件的数据，但是可以通过传递方法的形式达到修改数据的目的。

父组件向子组件传递方法：使用事件绑定机制 v-on / @的形式，把方法传给传递给子组件

<template>
  <div>
    <h1>测试父组件向子组件传递方法，这是父组件</h1>
    <!-- 2.父组件向子组件传递方法：使用事件绑定机制 v-on / @ -->
    <!-- changeName代表引用，不能使用 changeName()，否则就直接调用了-->
    <Son v-bind:fatherName="father" v-on:func="changeName" />
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son
  },
  data () {
    return {
      father: {
        id: 1,
        name: '父亲：张三'
      },
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    changeName (newName) {
      console.log("调用父组件方法fatherFn");
      this.father.name = newName
    }
  },
}
</script>

子组件通过this.emit('父组件中绑定的事件名')调用

<template>
  <div>
      <h2>测试父组件向子组件传递方法，这是子组件</h2>
      <p @click="fatherFn">我调用父组件中方法:{{fatherName.name}}</p>
  </div>
</template>


<script>
export default {
  // 1. 父组件向子组件传值：子组件使用props属性接收
  props: ['fatherName'], // 父组件传来的，只读
  components: {
  },
  data() {
    return {
      newName:'李四'
    }
  },// 自带的，可读可写
  computed: {
  },
  watch: {},
  methods: {
    // 当点击子组件的时候，this.$emit()拿到父组件传过来的方法，并调用方法
    fatherFn(){
      console.log(this);
      // this.$emit('func','李四')
      this.$emit('func',this.newName)
    }
  },
}
</script>

除去上述方法，还有一种方法，与“4”中法2相对应，就是通过$parent来调用。

4. 子组件向父组件传值

在“3”中子组件通过this.$emit('func',this.newName)调用父组件方法时，实际就包含了“子组件向父组件传值”，这是一种方式
还有一种方式就是给子组件通过ref来指定一个唯一标识，父组件通过$refs来调用，这种方式不仅能获取到子组件的数据和方法，还可以直接调用

// 父组件
<template>
  <div>
    <h1>测试父组件中调用子组件，这是父组件</h1>
    <!-- 3.引入子组件时指定ref -->
    <Son ref="son" />
    <button @click="onClick">调用子组件中值和方法</button>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son
  },
  data () {
    return {
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    onClick() {
      console.log(this.$refs['son'].s1);
      this.$refs['son'].fn()
    }
  },
}
</script>

<template>
  <div>
      <h2>测试父组件向子组件传递方法，这是子组件{{s1}} </h2>
  </div>
</template>


<script>
export default {
  components: {
  },
  data() {
    return {
      s1:"大儿"
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    fn(){
      this.s1 = '小儿'
    }
  },
}
</script>