在vue中，通常父子组件通信，我们使用的是props，但是有的场景，我们需要对父子组件进行双向绑定。这时我们会用到v-model自定义组件。
官网的解释则是，父组件将值通过v-model进行绑定，之后子组件通过props的key为value进行接收，通过事件input触发更改父组件。
当然为了避免子组件内有data，或其他props名为value，所以在当前实例下，有一个model属性,定义方法如下
model: {
prop: 'checked', // props默认是value
event: 'change' // 事件名默认是input
},
这样在子组件内通过$emit触发定义好的model事件名更改父组件的值。并且我们通过watch监听父组件值的更改绑定至子组件。代码如下：
父组件
子组件
效果图
在vue中，通常父子组件通信，我们使用的是props，但是有的场景，我们需要对父子组件进行双向绑定。这时我们会用到...
v-model语法糖 我们可以使用v-model对input进行双向绑定 v-model 语法糖本质是 :valu...
在线演示代码 v-model 语法糖 v-model 是官方封装的指令，实现了父子组件的双向数据绑定，其实是官方提...
v-model双向绑定v-bind单向绑定 v-model双向绑定的例子 运行结果a.png 使用v-bind绑定...
v-model双向绑定v-bind单向绑定 v-model双向绑定的例子 运行结果a.png 使用v-bind绑定...
v-model 数据双向绑定用作双向数据绑定 一、组件内部双向数据绑定 1、在实例的data中，设置content...
一、自定义组件使用 v-model实现双向数据绑定 1.1、单个 v- model 数据绑定默认情况下,组件上的 ...
使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。...
.sync作用：实现父子组件数据之间的双向绑定 一：.sync与v-model的共同点 .sync实现通信的方式：...
v-model：数据双向绑定 在表单控件或者组件上创建双向绑定。input、select、textare、comp...
本文标题：使用v-model对父子组件进行双向绑定
本文链接：https://www.haomeiwen.com/subject/dahsektx.html
网友评论