Vue父组件如何向子组件发送事件

Vue父组件向子组件发送事件有多种方法，以下是其中两种常用的方法：

使用props属性：父组件可以通过props属性向子组件传递数据和方法，子组件可以通过props接收数据和方法，并在需要的时候调用。例如：

父组件：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update-message', 'Hello from child component');
    }
  }
};
</script>

使用$refs属性：父组件可以通过给子组件添加ref属性，在父组件中通过$refs来访问子组件的方法和属性。例如：

父组件：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="sendMessage">发送消息给子组件</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendMessage() {
      this.$refs.child.receiveMessage('Hello from parent component');
    }
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    receiveMessage(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

以上是两种常用的方法，根据具体需求选择适合的方法进行父组件向子组件发送事件。