Vue.js 是一个流行的前端框架，它的组件化开发模式可使开发人员更加高效地构建应用程序。在这种模式下，父组件和子组件可以通过不同的方式实现通信，本文将详细介绍几种方法。
Props
在 Vue.js 中，父组件可以通过 props 传递数据给子组件。下面是一个简单的示例：
// www.javascriptcn.com code example
<!-- 父组件模版 -->
<template>
<ChildComponent :message="message"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello World!'
}
}
}
</script>// www.javascriptcn.com code example
<!-- 子组件模版 -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: {
message: String
}
}
</script>在这个示例中，父组件模版中通过在 ChildComponent 组件上绑定 :message="message"，将数据 message 传递给子组件。子组件中使用 props 来声明接收 message 数据，并通过 {{ message }} 输出该数据。
$emit
Vue.js 中，子组件可以使用 $emit 属性触发一个自定义事件，并向父组件传递数据。下面是一个示例：
// www.javascriptcn.com code example
<!-- 父组件模版 -->
<template>
<ChildComponent @child-message="onChildMessage"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
onChildMessage(message) {
console.log(message)
}
}
}
</script>// www.javascriptcn.com code example
<!-- 子组件模版 -->
<template>
<button @click="onClick">Click me</button>
</template>
<script>
export default {
methods: {
onClick() {
const message = 'Hello World!'
this.$emit('child-message', message)
}
}
}
</script>在这个示例中，子组件通过在 button 上绑定 onClick 方法来触发自定义事件。该事件名称为 'child-message'，并向父组件传递数据 message。父组件中通过在 ChildComponent 组件上使用 @child-message 来监听该事件，并将数据传递给 onChildMessage 方法。
ref
Vue.js 中，父组件可以使用 ref 属性获取子组件实例，进而操作子组件。下面是一个示例：
// www.javascriptcn.com code example
<!-- 父组件模版 -->
<template>
<div>
<input ref="child" type="text">
<button @click="onClick">Click me</button>
</div>
</template>
<script>
export default {
methods: {
onClick() {
this.$refs.child.focus()
}
}
}
</script>在这个示例中，父组件可以使用 ref="child" 获取子组件实例。然后，在 onClick 方法中，通过 this.$refs.child 调用子组件的 focus 方法来使输入框获得焦点。
provide 和 inject
Vue.js 中，父组件可以使用 provide 属性向下传递数据，子组件可以使用 inject 属性注入数据。provide 和 inject 可以实现跨级组件通信。
// www.javascriptcn.com code example
<!-- 父组件模版 -->
<template>
<div>
<GrandchildComponent></GrandchildComponent>
</div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue'
export default {
components: {
GrandchildComponent
},
provide() {
return {
message: 'Hello World!'
}
}
}
</script>// www.javascriptcn.com code example
<!-- 子组件模版 -->
<template>
<ChildComponent></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
}
}
</script>// www.javascriptcn.com code example
<!-- 孙子组件模版 -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
inject: ['message']
}
</script>在这个示例中，父组件使用 provide 返回一个 message 对象。它会自动传递给插入自己的所有子组件，包括多级嵌套的组件。GrandchildComponent 作为父级组件通过组合由 ChildComponent 传递的 message 数据并且最终将它传递给最深层的孙子组件，通过 inject 拿到了 message 对象。
Conclusion
以上就是 Vue.js 中几种实现父子组件通信的方法。每种方法都有其优点和缺点，具体的实现方式应根据项目需求选择。在实际开发中，不断地练习和尝试各种通信方式，才能更好地运用 Vue.js 框架构建出更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d00887e46428fe9ec89526