vue如何实现父子通讯

Vue 父子组件通信方法

Vue 中父子组件通信主要通过 props 和自定义事件实现，以下是具体方法：

父组件向子组件传值（props）

父组件通过 v-bind 或简写 : 传递数据给子组件，子组件通过 props 接收。

父组件代码示例：

<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

子组件代码示例：

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

子组件向父组件传值（自定义事件）

子组件通过 $emit 触发事件并传递数据，父组件通过 v-on 或简写 @ 监听事件。

子组件代码示例：

<template>
  <button @click="sendMessage">Send to Parent</button>
</template>

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

父组件代码示例：

<template>
  <ChildComponent @message-from-child="handleChildMessage" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleChildMessage(message) {
      console.log(message); // 输出: Hello from child
    }
  }
};
</script>

双向绑定（v-model）

通过 v-model 实现父子组件的双向数据绑定，本质上是 props 和自定义事件的语法糖。

子组件代码示例：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
};
</script>

父组件代码示例：

<template>
  <ChildComponent v-model="inputValue" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

高级通信方式

对于复杂场景，可以使用 $refs 或 Vuex 状态管理。

$refs 示例：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

子组件代码：

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    }
  }
};
</script>

以上方法覆盖了 Vue 父子组件通信的主要场景，可根据实际需求选择合适的方式。