Vue父子组件相互调用

父组件使用子组件的变量和方法

父组件引用子组件时，属性加上ref="son"，即可使用this.$refs.son.xxx调用子组件方法或使用变量

Father.vue:

<template>
  父组件<br><br>
  <Son ref="son" /><br><br>
  <button @click="getSonValue1()">获取子组件value1</button><br><br>
  <button @click="modifySonValue1()">修改子组件value1</button><br><br>
  <button @click="callSonMethod1()">调用子组件method1</button>
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {Son},
  methods: {
    getSonValue1() {
      alert(this.$refs.son.value1)
    },
    modifySonValue1() {
      this.$refs.son.value1 += 1
    },
    callSonMethod1() {
      this.$refs.son.method1()
    }
  }
}
</script>

Son.vue:

<template>
子组件
</template>
<script>
export default {
  data() {
    return {
      value1: 1,
    }
  },
  methods: {
    method1() {
      alert("调用子组件method1")
    }
  }
}
</script>

子组件使用父组件的变量和方法

方法一(推荐)

使用emits和props
父组件引用子组件时，变量以:value1="value1"的形式传给子组件，方法以@method1="method1"的形式传给子组件，
子组件使用props: ["value1"]和emits: ["method1"],来接收，
然后可以用this.value1来访问父组件的变量value1，使用this.$emit("method1")调用父组件的方法method1()

访问子组件的变量时，只能获取值，不能修改。如果要修改，必须使用父组件提供的方法来修改

Father.vue:

<template>
  父组件<br><br>
  <Son :value1="value1" @fatherModifyValue1="fatherModifyValue1" @method1="method1" /><br><br>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {Son},
  data() {
    return {
      value1: 1,
    }
  },
  methods: {
    method1() {
      alert("调用父组件method1")
    },
    fatherModifyValue1(newValue) {
      this.value1 = newValue
    }
  }
}
</script>

Son.vue:

<template>
子组件<br><br>
<button @click="getFatherValue1()">获取父组件value1</button><br><br>
<button @click="modifyFatherValue1()">修改父组件value1</button><br><br>
<button @click="callFatherMethod1()">调用父组件method1()</button><br><br>
</template>

<script>
export default {
  props: ["value1"],
  emits: ["fatherModifyValue1", "method1"],
  methods: {
    getFatherValue1() {
      alert(this.value1)
    },
    modifyFatherValue1() {
      // 报错，不能直接修改父组件变量
      // this.value1 += 1

      // 可用，调用父组件提供的方法修改父组件变量
      this.$emit("fatherModifyValue1", 200)
    },

    callFatherMethod1() {
      this.$emit("method1")
    }
  }
}
</script>

方法二(不推荐)

此方法更简单，但不推荐，因为使用Element等UI框架的组件时，难以确定外面嵌套了几层标签

使用this.$parent.xxx调用父组件方法或使用变量

Father.vue:

<template>
  父组件<br><br>
  <Son />
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {Son},
  data() {
    return {
      value1: 1,
    }
  },
  methods: {
    method1() {
      alert("调用父组件method1")
    },
  }
}
</script>

Son.vue:

<template>
子组件<br><br>
<button @click="getFatherValue1()">获取父组件value1</button><br><br>
<button @click="modifyFatherValue1()">修改父组件value1</button><br><br>
<button @click="callFatherMethod1()">调用父组件method1()</button><br><br>
</template>
<script>
export default {
  methods: {
    getFatherValue1() {
      alert(this.$parent.value1)
    },
    modifyFatherValue1() {
      this.$parent.value1 = 200
    },
    callFatherMethod1() {
      this.$parent.method1()
    }
  }
}
</script>

Reference

vue父组件调用子组件方法
Vue 子组件调用父组件方法的几种方式