vue如何实现数组对象的双向绑定,以及监听

如题所述

第1个回答  2021-01-15

零基础学vue,给元素进行事件绑定,v-on指令就能实现

第2个回答  2018-05-29
Vue2 取消了 .sync 指令修饰符,推崇单向闭环的数据流。即:父级通过 props 向子级传递数据,子级如果需要修改数据就需要在父级添加监听事件,并在子级中去触发事件修改值。
在多数情况下,是不需要双向绑定的,单向数据流更容易追踪数据变化排查问题。但一些特定场景下,如弹窗,除了外部由父组件控制显示和隐藏外,组件内部也有关闭和取消等按钮需要控制显示和隐藏。这虽然可以通过触发事件让父级修改显示状态来实现,但每一个弹窗组件都需要做一遍这样的事总觉得很不爽。
v-model
v-model 是 Vue2 中唯一支持双向绑定的指令,用于表单控件绑定,但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了, v-model 其实是个语法糖。
<input v-model="something">
<!-- 等价于以下内容 -->
<input :value="something" @input="something = $event.target.value">

也就是说,你只需要在组件中声明一个 name 为 value 的 props ,并且通过触发 input 事件传入一个值,就能修改这个 value 。
父组件中引用
<myComponent v-model="title"></myComponent>

子组件
const myComponent = {
template: '<div><h1>{{value}}</h1><button @click="changeTitle">Change</button></div>',
props: {
value: String
},
methods: {
changeTitle() {
this.$emit('input', '子组件')
}
}
}

上面这个例子,最初显示的是父组件传入的 title ,点击子组件中的按钮后会修改显示值为子组件 。
组件内部控制关闭的弹窗
现在可以解决弹窗组件内部自行关闭的问题了。
Demo
多字段的双向绑定
一个组件只能定义一个 v-model ,假如想双向绑定多个值怎么办?
v-model 并没有限制 value 的数据类型,只是限制了是 一个值! 那么只需要把 value 的数据类型换成 Object 或者 Array ,把多出的字段作为对象的属性或数组的元素传入,多少个都不是问题了。
从最佳实践角度出发,推荐只是特定场景下使用,比如自定义的表单组件。本回答被网友采纳
第3个回答  2018-05-28
Vue2 取消了 .sync 指令修饰符,推崇单向闭环的数据流。即:父级通过 props 向子级传递数据,子级如果需要修改数据就需要在父级添加监听事件,并在子级中去触发事件修改值。
在多数情况下,是不需要双向绑定的,单向数据流更容易追踪数据变化排查问题。但一些特定场景下,如弹窗,除了外部由父组件控制显示和隐藏外,组件内部也有关闭和取消等按钮需要控制显示和隐藏。这虽然可以通过触发事件让父级修改显示状态来实现,但每一个弹窗组件都需要做一遍这样的事总觉得很不爽。
v-model
v-model 是 Vue2 中唯一支持双向绑定的指令,用于表单控件绑定,但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了, v-model 其实是个语法糖。
<input v-model="something">
<!-- 等价于以下内容 -->
<input :value="something" @input="something = $event.target.value">

也就是说,你只需要在组件中声明一个 name 为 value 的 props ,并且通过触发 input 事件传入一个值,就能修改这个 value 。
父组件中引用
<myComponent v-model="title"></myComponent>

子组件
const myComponent = {
template: '<div><h1>{{value}}</h1><button @click="changeTitle">Change</button></div>',
props: {
value: String
},
methods: {
changeTitle() {
this.$emit('input', '子组件')
}
}
}

上面这个例子,最初显示的是父组件传入的 title ,点击子组件中的按钮后会修改显示值为子组件 。
组件内部控制关闭的弹窗
现在可以解决弹窗组件内部自行关闭的问题了。
Demo
多字段的双向绑定
一个组件只能定义一个 v-model ,假如想双向绑定多个值怎么办?
v-model 并没有限制 value 的数据类型,只是限制了是 一个值! 那么只需要把 value 的数据类型换成 Object 或者 Array ,把多出的字段作为对象的属性或数组的元素传入,多少个都不是问题了。
从最佳实践角度出发,推荐只是特定场景下使用,比如自定义的表单组件。