Vue父子组件之间访问（父组件调用子组件方法）

<template>
  <div>
    <h1 @click="click">这是father组件</h1>
    <son ref="son"></son>
  </div>
</template>

<script>
import son from "./son";
export default {
  nane: "father",
  components: {
    son,
  },
  methods: {
    // 父组件调用子组件方法
    click() {
      // $children父组件调用子组件的方法（较少使用）
      // this.$children[0].click();
      // $refs（常用）对象类型，默认为空对象
      this.$refs.son.click();
    },
  },
};
</script>

<style>
</style>

<template>
  <div>
    这是son组件
    <ul @click="click"></ul>
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
export default {
  name: "son",
  data() {
    return {
      father: "this is son res",
    };
  },
  methods: {
    // 子组件打印相关信息
    click() {
      console.log("父组件调用到了子组件的方法");
    },
    // 子组件访问父组件方法，耦合度多高（不推荐）
    btnClick() {
      this.$parent.click();
      // 访问根组件
      console.log(this.$root);
    },
  },
};
</script>

<style>
</style>

总结：父组件访问子组件方法：$refs,子组件访问父组件方法$parent(不推荐)。访问根组件方法$root。