vue如何实现父子通讯

父子组件通信方式

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

父传子：使用props

父组件通过v-bind向子组件传递数据，子组件通过props接收：

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage" />
</template>

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

<!-- 子组件 -->
<script>
export default {
  props: ['message'],
  mounted() {
    console.log(this.message) // 输出: Hello from parent
  }
}
</script>

子传父：使用$emit

子组件通过$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>
  <child-component @message-from-child="handleChildMessage" />
</template>

<script>
export default {
  methods: {
    handleChildMessage(msg) {
      console.log(msg) // 输出: Hello from child
    }
  }
}
</script>

双向绑定：v-model语法糖

对于表单元素等需要双向绑定的场景：

<!-- 父组件 -->
<template>
  <child-component v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

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

访问子组件实例：ref

父组件通过ref直接访问子组件的属性和方法：

<!-- 父组件 -->
<template>
  <child-component ref="childRef" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod()
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called')
    }
  }
}
</script>

跨级组件通信

对于深层嵌套组件，可考虑使用provide/inject：

// 祖先组件
export default {
  provide() {
    return {
      sharedData: 'Shared value'
    }
  }
}

// 后代组件
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData) // 输出: Shared value
  }
}