vue父组件调用子组件中的方法、值的几种方式

在Vue中，父组件可以通过几种方式调用子组件中的方法或值：

1. 使用ref属性引用子组件实例，然后在父组件中通过this.$refs.refName.methodName()调用子组件方法。
2. 使用$children属性来访问子组件实例，然后调用其方法。
3. 通过自定义事件（$emit）由子组件触发父组件的方法。

以下是具体示例：

使用ref调用子组件方法：

父组件：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
}
</script>

子组件：

<template>
  <div>
    <!-- Child Component Template -->
  </div>
</template>
 
<script>
export default {
  methods: {
    childMethod() {
      // Child Method Logic
      console.log('Child method called');
    }
  }
}
</script>

使用$children调用子组件方法：

父组件：

<template>
  <div>
    <child-component></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$children[0].childMethod();
    }
  }
}
</script>

使用自定义事件：

子组件：

<template>
  <div>
    <!-- Child Component Template -->
  </div>
</template>
 
<script>
export default {
  methods: {
    childMethod() {
      // Child Method Logic
      console.log('Child method called');
      this.$emit('callChildMethod');
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @callChildMethod="parentMethod"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      // Parent Method Logic
      console.log('Parent method called');
    }
  }
}
</script>

以上三种方式都可以实现父组件调用子组件方法的目的，选择哪种方式取决于具体场景和需求。通常情况下，使用ref或$children适用于直接控制子组件，而自定义事件更适合父组件仅需响应子组件的行为。