Vue 父子组件通信的 10 个新手常见问题

1. 如何从子组件向父组件传递数据？

最常见的方式是使用 props 将数据从父组件传递给子组件。要从子组件向父组件传递数据，可以使用 $emit 方法触发一个事件，并通过事件参数传递数据。

<!-- 父组件 -->
<template>
  <ChildComponent @update="handleUpdate" />
</template>

<script>
  export default {
    methods: {
      handleUpdate(updatedValue) {
        // 处理从子组件收到的数据
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <input v-model="value" @input="$emit("update", value)" />
</template>

<script>
  export default {
    data() { return { value: "" } }
  }
</script>

2. 如何从父组件访问子组件的实例？

可以使用 $refs 属性来从父组件访问子组件的实例。

<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.child) // 访问子组件实例
    }
  }
</script>

3. 如何从子组件访问父组件的实例？

可以使用 $parent 属性来从子组件访问父组件的实例。

<!-- 子组件 -->
<template>
  {{ $parent.message }}
</template>

4. 如何在兄弟组件之间通信？

兄弟组件无法直接通信。可以使用事件总线或 Vuex 状态管理工具包来实现通信。

// 事件总线
export const eventBus = new Vue()

// 父组件
eventBus.$emit("my-event", data)

// 兄弟组件 1
eventBus.$on("my-event", data => {
  // 处理数据
})

// 兄弟组件 2
eventBus.$on("my-event", data => {
  // 处理数据
})

5. 如何使用函数回调进行通信？

在某些情况下，可以通过在子组件的道具中传入一个函数回调来从父组件向子组件传递数据。

<!-- 父组件 -->
<template>
  <ChildComponent :callback="handleData" />
</template>

<script>
  export default {
    methods: {
      handleData() {
        // 返回要传递给子组件的数据
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <button @click="callback(value)">传回数据</button>
</template>

<script>
  export default {
    props: ["callback"],
    data() { return { value: "一些数据" } }
  }
</script>

6. 如何通过 provide/inject 进行通信？

provide/inject 允许父组件向其所有后代组件注入数据或方法。

// 父组件
export default {
  provide() {
    return {
      myData: "通过 provide 传递的数据"
    }
  }
}

// 子组件
export default {
  inject: ["myData"],
  render() { return `获取到的数据：${this.myData}` }
}

7. 如何在跨组件的 Vuex 存储中共享数据？

Vuex 状态管理工具包允许在组件之间共享数据。

// Vuex store
export const store = new Vuex.Store({
  state: {
    sharedData: "共享数据"
  }
})

// 父组件
export default {
  computed: {
    sharedData() { return store.state.sharedData }
  }
}

// 子组件
export default {
  computed: {
    sharedData() { return store.state.sharedData }
  }
}

8. 如何处理深度嵌套组件的通信？

在深度嵌套的组件中进行通信时，可以使用事件总线或 Vuex。

// 事件总线
export const eventBus = new Vue()

// 最外层父组件
eventBus.$emit("my-event", data)

// 嵌套子组件
eventBus.$on("my-event", data => {
  // 处理数据
})

9. 如何处理组件销毁后的通信？

在组件销毁后，事件总线和回调函数可能会导致错误。使用 beforeDestroy 钩子来解除事件监听器和回调函数。

<!-- 父组件 -->
<template>
  <ChildComponent :callback="handleData" />
</template>

<script>
  export default {
    beforeDestroy() {
      this.$off("my-event")
    }
  }
</script>

10. 如何优化父子组件通信性能？

避免频繁触发事件，使用批量更新，并使用键值进行列表渲染。

// 父组件
export default {
  methods: {
    handleData() {
      // 批量更新
      this.$nextTick(() => {
        // 更新数据
      })
    }
  }
}

// 子组件
export default {
  key: "my-unique-key"
}