VueJS - 父子组件传值：轻松实现数据传递与交互
2023-09-27 18:08:52
一、父组件向子组件传值
父组件向子组件传递数据是最常见的情况。Vue.js提供了多种方式实现父组件向子组件传值，包括：
- 通过 v-bind:xxx 传递数据
v-bind:xxx 指令可以将父组件的数据绑定到子组件的属性上。例如，在父组件中，你可以使用以下代码将父组件的 message 数据传递给子组件：
<template>
<child-component v-bind:message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello from parent component!'
}
}
}
</script>
在子组件中，可以使用 this.$attrs.message 来访问父组件传递的数据：
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: ['message']
}
</script>
- 通过子组件的 props 接收数据
子组件也可以使用 props 来接收父组件传递的数据。在子组件中，可以使用 props 属性来定义需要从父组件接收的数据。例如，在子组件中，可以使用以下代码接收父组件传递的 message 数据：
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: ['message']
}
</script>
在父组件中，可以使用以下代码将 message 数据传递给子组件：
<template>
<child-component :message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello from parent component!'
}
}
}
</script>
- 通过 provide 和 inject 传递数据
provide 和 inject 是 Vue.js 2.2.0 中引入的新特性，它们可以实现跨组件的数据传递。在父组件中，可以使用 provide 方法来提供数据，在子组件中可以使用 inject 方法来注入数据。例如，在父组件中，可以使用以下代码提供 message 数据：
<template>
<child-component></child-component>
</template>
<script>
export default {
provide() {
return {
message: 'Hello from parent component!'
}
}
}
</script>
在子组件中，可以使用以下代码注入 message 数据：
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
inject: ['message']
}
</script>
二、子组件向父组件传值
子组件向父组件传递数据的情况也不少见。Vue.js也提供了多种方式实现子组件向父组件传值，包括：
- 通过 $emit 事件传递数据
emit 事件是 Vue.js 中子组件向父组件传递数据的最常用方式。在子组件中，可以使用 emit 方法来触发事件，并在父组件中使用 v-on 来监听事件。例如，在子组件中，可以使用以下代码触发 message 事件：
<template>
<button @click="$emit('message', 'Hello from child component!')"></button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message', 'Hello from child component!')
}
}
}
</script>
在父组件中，可以使用以下代码监听 message 事件：
<template>
<child-component @message="receiveMessage"></child-component>
</template>
<script>
export default {
methods: {
receiveMessage(message) {
console.log(message)
}
}
}
</script>
- 通过自定义事件传递数据
除了使用 $emit 事件外，还可以通过自定义事件来传递数据。在子组件中，可以使用以下代码触发自定义事件：
<template>
<button @click="sendMessage"></button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('custom-message', 'Hello from child component!')
}
}
}
</script>
在父组件中，可以使用以下代码监听自定义事件：
<template>
<child-component @custom-message="receiveMessage"></child-component>
</template>
<script>
export default {
methods: {
receiveMessage(message) {
console.log(message)
}
}
}
</script>
- 通过子组件的 this.$parent 对象传递数据
子组件也可以通过 this.$parent 对象来访问父组件的数据和方法。例如，在子组件中，可以使用以下代码访问父组件的 message 数据：
<template>
<p>{{ this.$parent.message }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello from child component!'
}
}
}
</script>
结语
在Vue.js中，父子组件之间的传值和交互是至关重要的。通过理解和掌握本文介绍的多种传值方式，你将能够轻松构建出更具交互性和可重用性的Vue.js应用。
