vue组件通讯props和$emit的例子

当然，我可以为你提供一个使用 Vue 组件通讯的示例，特别是通过 props 和 $emit 的方式。

子组件 (ChildComponent.vue)

vue

<template>

  <div>

    <button @click="notifyParent">点击我通知父组件</button>

    <p>父组件传入的消息是：{{ message }}</p>

  </div>

</template>

<script>

export default {

  props: {

    message: {

      type: String,

      default: '没有接收到消息'

    }

  },

  methods: {

    notifyParent() {

      // 子组件通过 $emit 触发一个自定义事件

      this.$emit('child-event', '这是来自子组件的消息');

    }

  }

}

</script>

 

父组件 (ParentComponent.vue)

vue

<template>

  <div>

    <h2>父组件</h2>

    <!-- 父组件使用子组件，并通过 :message 传入数据 -->

    <ChildComponent :message="parentMessage" @child-event="handleChildEvent" />

    <p>子组件发来的消息是：{{ childMessage }}</p>

  </div>

</template>

<script>

// 假设 ChildComponent 已经在父组件中注册过了

export default {

  data() {

    return {

      parentMessage: '这是从父组件传来的消息',

      childMessage: ''

    }

  },

  methods: {

    handleChildEvent(message) {

      // 父组件监听子组件的 child-event 事件，并处理消息

      this.childMessage = message;

    }

  }

}

</script>

 

在这个示例中：

子组件 (ChildComponent) 通过 props 接收来自父组件 (ParentComponent) 的数据 (message)。

子组件中有一个按钮，当点击按钮时，会触发 notifyParent 方法，该方法通过 $emit 发送一个名为 child-event 的自定义事件，并附带一个消息。

父组件 (ParentComponent) 使用子组件时，通过 :message 绑定将数据 (parentMessage) 传递给子组件，并通过 @child-event 监听子组件的 child-event 事件，当该事件触发时，会调用 handleChildEvent 方法处理消息。