Vue 中父子组件如何通信？

推荐答案

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

1. Props 和 Events：

   • 父组件通过 props 向子组件传递数据。
   • 子组件通过 $emit 触发事件，父组件通过监听这些事件来响应子组件的动作。

2. $refs：

   • 父组件可以通过 ref 属性获取子组件的实例，并直接调用子组件的方法或访问其数据。

3. $parent 和 $children：

   • 子组件可以通过 $parent 访问父组件的实例。
   • 父组件可以通过 $children 访问子组件的实例。

4. Provide / Inject：

   • 父组件通过 provide 提供数据，子组件通过 inject 注入数据。

5. Vuex：

   • 使用 Vuex 状态管理库，父子组件通过共享的状态进行通信。

本题详细解读

1. Props 和 Events

Props 是父组件向子组件传递数据的主要方式。父组件通过 v-bind 或简写 : 将数据传递给子组件，子组件通过 props 接收数据。

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

2. $refs

$refs 允许父组件直接访问子组件的实例。父组件可以通过 ref 属性给子组件命名，然后在父组件中通过 this.$refs 访问子组件。

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

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

<!-- 子组件 -->
<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

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

3. $parent 和 $children

$parent 和 $children 允许组件直接访问其父组件或子组件的实例。这种方式虽然方便，但不推荐频繁使用，因为它会使组件之间的耦合度增加。

// www.javascriptcn.com code example
<!-- 子组件 -->
<template>
  <div>
    <p>Child Component</p>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod();
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

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

4. Provide / Inject

provide 和 inject 是 Vue 提供的一种高级组件通信方式，允许祖先组件向其所有子孙组件注入依赖。

// www.javascriptcn.com code example
<!-- 祖先组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

5. Vuex

Vuex 是 Vue 的官方状态管理库，适用于大型应用中的状态管理。父子组件可以通过 Vuex 共享状态，而不需要直接传递数据。

// www.javascriptcn.com code example
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
});

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$store.commit('updateMessage', 'New message from child');
    }
  }
};
</script>