细胞医疗 网站模版,WordPress建页面,网站建设合同模式,自己怎么接单做网站vue中v-model的原理是什么#xff1f;
特点#xff1a;双向绑定
数据视图
视图数据
场景#xff1a;
收集表单数据组件上
原理#xff1a;
v-model只是个语法题#xff0c;本质是#xff1a;v-model v-bind (:value) v-on (input)
template
特点双向绑定
数据视图
视图数据
场景
收集表单数据组件上
原理
v-model只是个语法题本质是v-model v-bind (:value) v-on (input)
templatediv idappp{{ text }}/pinput typetext v-modeltextinput typetext :valuetext input(e) (text e.target.value) //div
/templatescript
export default {name: app,data() {return {text: xxxxxxxx,};},
};
/scriptstyle
/style
vue中v-model作用在组件上的原理是什么
为什么要在组件上使用v-model我们的目的是
v-model绑定的变量发生改变能够影响组件的状态或行为数据视图组件内部状态或行为发生变化能够影响v-model绑定的变量视图数据
怎么做
v-model其实就是 :value和input事件的简写
父组件v-model直接绑定数据
子组件props通过value接收数据事件触发 input
例子
App.vue
templatediv idappmy-select v-modelcity/my-select/div
/templatescriptimport MySelect from ./components/MySelect.vue;export default {name: app,components: {MySelect,},data() {return {city: 104,};},
};
/scriptstyle
/style
MySelect.vue
templatedivselect :valuevalue changeselectCityoption value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104广州/optionoption value105深圳/option/select/div
/templatescript
export default {props: {value: String,},methods: {selectCity(e) {this.$emit(input, e.target.value);},},
};
/scriptstyle
/stylevue中sync修饰符的原理是什么
.sync 是一个修饰符用于在自定义组件中实现父子组件之间的双向数据绑定。
.sync主要应用于自定义组件之间的数据传递和状态管理可以实现父子组件之间的双向数据流。通过 .sync可以将父组件的数据传递给子组件并且子组件可以修改这个数据并将修改的结果传递回父组件。
1 子组件改变父组件中的变量值
1.1 不使用sync
我们知道vue中父组件是使用v-bind(缩写为:)给子组件传入参数然后子组件通过prop属性接收该参数。此时我们可以给子组件传入一个函数子组件通过调用传入的函数来改变父组件中参数的值。 即主要部分如下所示
!-- 父组件给子组件传入一个setNum函数 --
child :numnumParent setNum(res) numParent res/child//子组件通过调用这个函数来实现修改父组件的状态
methods: {changNum(){this.$emit(setNum,666)
}此时子组件只需要触发changNum函数就能执行父组件中的setNum函数从而改变父组件中numParent的值
1.2 使用sync
上述方法较复杂使用sync可简化写法
!-- 父组件给子组件传入一个setNum函数 --
child :num.syncnumParent//子组件通过调用这个函数来实现修改父组件的状态
methods: {changNum(){this.$emit(update:num,666)
}上述两种方式都可以将numParent的值由222变为666其中父组件中绑定的参数后面加了一个.sync子组件中的事件名称被换成了update:age如下
update固定部分vue约定俗成的注意必须添加update的前缀才能正确触发事件num是要修改的参数的名称是我们手动配置的与传入的参数名字对应起来
2 实现父子组件双向绑定
vue考虑到组件的可维护性是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值而在子组件中可以通过$emit向父组件通信通过1.1方式通过这种间接的方式改变父组件的data从而实现子组件改变props的值。
那么同时vue中也提供了一种解决方案.sync修饰符1.2方式 允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值而在子组件中可以通过$emit向父组件通信通过1.1方式通过这种间接的方式改变父组件的data从而实现子组件改变props的值。
那么同时vue中也提供了一种解决方案.sync修饰符1.2方式
