vue中父组件访问子组件方式

通过ref引用

• 在父组件的模板中，可以给子组件添加一个ref属性，然后在父组件的 JavaScript 代码中通过this.$refs来访问子组件的实例。这样就可以直接调用子组件的方法或访问子组件的数据。

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="accessChild">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    accessChild() {
      // 通过ref访问子组件实例
      const childInstance = this.$refs.child;
      // 调用子组件的方法
      childInstance.childMethod();
      // 访问子组件的数据
      console.log(childInstance.childData);
    }
  }
};
</script>

通过props传参结合事件

• 父组件可以通过props向子组件传递数据和方法，子组件可以通过触发事件来通知父组件。父组件可以在子组件触发事件时，获取子组件的数据或执行相应的操作。

<!-- 父组件 -->
<template>
  <div>
    <child-component :parent-method="parentMethod" @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('父组件方法被调用');
    },
    handleChildEvent(data) {
      console.log('接收到子组件传递的数据：', data);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="callParentMethod">调用父组件方法</button>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  props: {
    parentMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentMethod() {
      // 调用父组件传递的方法
      this.parentMethod();
    },
    sendDataToParent() {
      // 向父组件触发事件并传递数据
      this.$emit('child-event', '子组件数据');
    }
  }
};
</script>

通过$children

• 父组件可以通过this.$children来访问所有子组件的实例。$children是一个数组，包含了当前组件的所有子组件实例。但是这种方式相对不太常用，因为它返回的是一个数组，需要通过索引或遍历的方式来访问具体的子组件，不够直观和灵活

<template>
  <div>
    <child-component-1></child-component-1>
    <child-component-2></child-component-2>
    <button @click="accessChildren">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  },
  methods: {
    accessChildren() {
      // 通过$children访问子组件实例
      const child1 = this.$children[0];
      const child2 = this.$children[1];
      // 调用子组件的方法
      child1.childMethod1();
      child2.childMethod2();
    }
  }
};
</script>

通过provide和inject

• 这是一种跨级组件通信的方式，也可以用于父组件访问子组件。父组件通过provide选项提供数据或方法，子组件通过inject选项注入这些数据或方法。

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      parentData: '父组件数据',
      parentMethod: this.parentMethod
    };
  },
  methods: {
    parentMethod() {
      console.log('父组件方法被调用');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ parentData }}</p>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  inject: ['parentData', 'parentMethod'],
  methods: {
    callParentMethod() {
      // 调用父组件提供的方法
      this.parentMethod();
    }
  }
};
</script>