Vue父子组件双向绑定：终极指南
2023-08-26 11:04:53
Vue.js 父子组件通信的终极指南
目录
- Props
- Emit
- $emit
- $on
- $attrs
- v-model
- vuex
- 总结
- 常见问题解答
前言
Vue.js 作为当前最流行的 JavaScript 框架之一，以其出色的学习曲线、卓越的性能和灵活性备受开发者青睐。在 Vue.js 的组件化开发中，父子组件间的通信至关重要，而双向绑定则是实现这种通信的利器。
Props
Props 是 Vue.js 中父子组件通信的一种常见手段，它允许父组件向子组件传递数据。父组件通过在子组件标签中指定 props 属性，将数据传递给子组件。子组件可以通过 props 来访问父组件传递过来的数据。
<!-- 父组件 -->
<template>
<child-component :message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<!-- 子组件 -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: ['message']
}
</script>
Emit
Emit 是 Vue.js 中子组件向父组件传递数据的常用方法。子组件可以通过调用 $emit() 方法，将数据传递给父组件。父组件可以通过在子组件标签中指定 @ 事件处理函数，来监听子组件发出的事件。
<!-- 子组件 -->
<template>
<button @click="handleClick">Send Message</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('message', 'Hello Vue!')
}
}
}
</script>
<!-- 父组件 -->
<template>
<child-component @message="handleMessage"></child-component>
</template>
<script>
export default {
methods: {
handleMessage(message) {
console.log(message)
}
}
}
</script>
$emit
emit 是 Vue.js 中子组件向父组件传递数据的另一种方式。与 emit() 方法不同，emit() 方法可以在子组件的任意位置调用，而不仅仅是在事件处理函数中。
<!-- 子组件 -->
<template>
<button @click="$emit('message', 'Hello Vue!')">Send Message</button>
</template>
<script>
export default {
props: ['message']
}
</script>
$on
$on 是 Vue.js 中父组件监听子组件发出的事件的方法。父组件可以通过在子组件标签中指定 @ 事件处理函数，来监听子组件发出的事件。
<!-- 父组件 -->
<template>
<child-component @message="handleMessage"></child-component>
</template>
<script>
export default {
methods: {
handleMessage(message) {
console.log(message)
}
}
}
</script>
<!-- 子组件 -->
<template>
<p>{{ message }}</p>
<button @click="$emit('message', 'Hello Vue!')">Send Message</button>
</template>
<script>
export default {
props: ['message']
}
</script>
$attrs
attrs 是 Vue.js 中父组件向子组件传递数据的另一种方式。attrs 包含了父组件传递给子组件的所有属性，但不包括 props。子组件可以通过 $attrs 来访问父组件传递过来的数据。
<!-- 父组件 -->
<template>
<child-component :message="message" :color="color"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!',
color: 'red'
}
}
}
</script>
<!-- 子组件 -->
<template>
<p>{{ message }}</p>
<p>{{ attrs.color }}</p>
</template>
<script>
export default {
props: ['message']
}
</script>
v-model
v-model 是 Vue.js 中实现父子组件双向绑定的常用方法。v-model 可以将父组件的数据绑定到子组件的输入控件上，当子组件的输入控件发生变化时，父组件的数据也会随之发生变化。
<!-- 父组件 -->
<template>
<child-component v-model="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<!-- 子组件 -->
<template>
<input v-model="message">
</template>
<script>
export default {
props: ['message']
}
</script>
vuex
vuex 是 Vue.js 的官方状态管理库。vuex 可以将组件中的状态抽取出来，并集中管理。组件可以通过 vuex 来访问和修改状态。vuex 可以很好地实现父子组件之间的双向绑定。
<!-- 父组件 -->
<template>
<child-component></child-component>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['message'])
},
methods: {
...mapMutations(['setMessage'])
}
}
</script>
<!-- 子组件 -->
<template>
<p>{{ message }}</p>
<button @click="setMessage('Hello Vue!')">Send Message</button>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['message'])
},
methods: {
...mapMutations(['setMessage'])
}
}
</script>
总结
Vue.js 提供了多种方法来实现父子组件之间的双向绑定，包括 props、emit、emit、on、$attrs、v-model 和 vuex。这些方法各有优缺点，开发者可以根据自己的需求选择最合适的方法。
Vue.js 的父子组件双向绑定是一种非常强大的功能，它可以帮助开发者轻松实现组件之间的通信。通过双向绑定，组件之间可以相互传递数据，并对数据的变化做出响应。这使得 Vue.js 非常适合构建复杂的用户界面。
常见问题解答
-
props 和 emit 有什么区别？
- props 用于父组件向子组件传递数据，而 emit 用于子组件向父组件传递数据。
-
emit 和 on 有什么区别？
- emit 用于子组件向父组件发出事件，而 on 用于父组件监听子组件发出的事件。
-
$attrs 和 props 有什么区别？
- props 包含了父组件传递给子组件的 props 属性，而 $attrs 包含了父组件传递给子组件的所有属性，但不包括 props。
-
v-model 是如何实现双向绑定的？
- v-model 通过创建一个观察器，监听输入控件的变化，并更新绑定的数据。
-
vuex 是如何实现双向绑定的？
- vuex 通过将组件中的状态集中管理，并提供 getter 和 setter 方法来实现双向绑定。
