vue父子组件之间通讯方式

在Vue中，父子组件之间传值通信有多种方法，可以通过props、$emit、provide/inject等方式实现。

使用props和$emit：父组件可以通过props向子组件传递数据，子组件通过$emit触发自定义事件将数据传递给父组件。

父组件示例：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
    <p>父组件消息：{{ message }}</p>
  </div>
</template>

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

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

子组件示例：

<template>
  <div>
    <p>子组件消息：{{ message }}</p>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

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

使用$emit触发事件：父组件可以通过$emit触发自定义事件，子组件通过监听该事件获取父组件传递的值。

父组件示例：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>父组件消息：{{ message }}</p>
  </div>
</template>

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

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

子组件示例：

<template>
  <div>
    <button @click="emitCustomEvent">传递消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', 'New message from child component');
    },
  },
};
</script>

使用provide/inject：父组件可以通过provide提供数据，子组件通过inject注入获取父组件传递的数据。

父组件示例：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  provide: {
    message: 'Hello',
  },
  components: {
    ChildComponent,
  },
};
</script>

子组件示例：

<template>
  <div>
    <p>子组件消息：{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
};
</script>

这些方法都可以实现父子组件之间的传值通信，根据具体的业务需求，选择合适的方法即可。

vue父子组件之间通讯方式

悦读