在 Vue.js 中，父子组件通信是非常常见的需求。本文将详细介绍 Vue.js 中父子组件通信的几种方式，并提供示例代码和指导意义。
Props
父组件通过 props 属性向子组件传递数据。子组件通过 props 接收数据并进行处理。
示例代码：
// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
<child-component :message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>指导意义：
- 通过 props 传递数据可以使组件之间解耦，提高组件的复用性。
- 父组件可以通过 props 传递一些数据给子组件，子组件可以根据这些数据进行渲染。
- 子组件可以通过 props 接收到父组件传递的数据，从而进行相应的处理。
$emit
子组件通过 $emit 方法向父组件发送事件，并传递数据。父组件通过 v-on 监听事件，接收子组件传递的数据。
示例代码：
// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
<child-component v-on:send-message="handleSendMessage"></child-component>
</template>
<script>
export default {
methods: {
handleSendMessage(message) {
console.log(message)
}
}
}
</script>
<!-- 子组件 -->
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('send-message', 'Hello World!')
}
}
}
</script>指导意义：
- 通过 $emit 发送事件可以实现子组件向父组件的通信。
- 父组件可以通过 v-on 监听事件，从而接收子组件传递的数据。
- 子组件可以通过 $emit 方法传递数据给父组件，从而实现通信。
$parent 和 $children
子组件可以通过 $parent 属性访问父组件实例，父组件可以通过 $children 属性访问子组件实例。
示例代码：
// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
<child-component></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
mounted() {
console.log(this.$children[0].message)
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
},
mounted() {
console.log(this.$parent.message)
}
}
</script>指导意义：
- 通过 $parent 和 $children 属性可以实现父子组件之间的通信。
- 子组件可以通过 $parent 属性访问父组件实例，从而获取父组件的数据或方法。
- 父组件可以通过 $children 属性访问子组件实例，从而获取子组件的数据或方法。
$refs
父组件可以通过 ref 属性为子组件指定一个唯一的标识符，然后通过 $refs 属性访问子组件实例。
示例代码：
// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
<child-component ref="child"></child-component>
<button @click="handleClick">获取子组件数据</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log(this.$refs.child.message)
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>指导意义：
- 通过 $refs 属性可以实现父组件访问子组件实例的需求。
- 父组件可以通过 ref 属性为子组件指定一个唯一的标识符，从而访问子组件实例。
- 子组件可以通过 $refs 属性访问父组件实例，从而获取父组件的数据或方法。
Conclusion
本文详细介绍了 Vue.js 中父子组件通信的几种方式，包括 Props、$emit、$parent 和 $children、$refs。通过学习这些通信方式，我们可以更好地实现组件之间的解耦和通信，提高组件的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d130bba941bf71342854bb