Web前端 ---- 【Vue】（组件）父子组件之间的通信一文带你了解

在Vue中，父子组件之间的通信可以通过几种方式实现：

1. 使用props传递数据（父传子）
2. 使用自定义事件（子传父）
3. 使用$refs（父子间）
4. 使用Vuex进行状态管理（全局状态）
5. 使用$parent或$children（不推荐，不够封装）

以下是实现这些通信方式的示例代码：

父子组件通信 - Props

父组件：

<template>
  <ChildComponent :parentData="message" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
</script>

子组件：

<template>
  <div>{{ parentData }}</div>
</template>
 
<script>
export default {
  props: ['parentData']
}
</script>

父子组件通信 - Events

子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'Hello from child');
    }
  }
}
</script>

父组件：

<template>
  <ChildComponent @childEvent="receiveFromChild" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveFromChild(msg) {
      console.log(msg); // 输出：Hello from child
    }
  }
}
</script>

父子组件通信 - $refs

父组件：

<template>
  <ChildComponent ref="child" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$refs.child.receiveFromParent('Hello from parent');
  }
}
</script>

子组件：

<template>
  <div>{{ messageFromParent }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      messageFromParent: ''
    }
  },
  methods: {
    receiveFromParent(msg) {
      this.messageFromParent = msg;
    }
  }
}
</script>

以上代码展示了Vue组件之间通信的基本方式。在实际应用中，应根据具体情况选择最合适的通信方式。