网站开发费入什么费用,义乌做网站公司义乌网站制作,昆明网站制作公司,酒店网络营销推广方式目录 1#xff0c;原理1.1#xff0c;作用于表单元素1.2#xff0c;作用于自定义组件 2#xff0c;编译结果展示2.2#xff0c;表单元素2.1#xff0c;自定义组件 1#xff0c;原理
官网参考
v-model 是一个语法糖#xff0c;最终会生成一个属性和一个事件。并且即可… 目录 1原理1.1作用于表单元素1.2作用于自定义组件 2编译结果展示2.2表单元素2.1自定义组件 1原理
官网参考
v-model 是一个语法糖最终会生成一个属性和一个事件。并且即可以作用于表单元素又可作用于自定义组件。
1.1作用于表单元素
vue 会根据作用的表单元素类型而生成合适的属性和事件。
例如作用于普通文本框时它会生成value属性和input事件而作用于单选框或多选框时它会生成checked属性和change事件。参考
1.2作用于自定义组件
v-model也可作用于自定义组件默认情况下它会生成一个value属性和input事件。
Children v-modelage /
!-- 等效于 --
Children :valueage inputage$event /可通过组件的model配置项来改变生成的属性和事件。
// Children
export default {model: {prop: address, // 默认为 valueevent: change, // 默认为 input},
};2编译结果展示
2.2表单元素
templatedivinput typetext v-modelname //div
/templatescript
export default {data() {return {name: 下雪天的夏风,};},mounted() {console.log(this._vnode);},
};
/script编译结果属性在 data.domProps 中事件在 data.on 中。 2.1自定义组件
templatedivChildren v-modelage //div
/templatescript
import Children from ./components/Children.vue;
export default {components: {Children,},data() {return {age: 18,};},mounted() {console.log(this._vnode);},
};
/script!-- 子组件 --
templatedivspan年龄{{ value }}/spanbutton clickhandleClick年龄自增/button/div
/templatescript
export default {props: [value],methods: {handleClick() {this.$emit(input, this.value 1);},},
};
/script编译结果属性在 componentOptions.propsData 中事件在 componentOptions.listeners 中。
如果使用 model 配置项更改
!-- 子组件 --
templatedivspan年龄{{ address }}/spanbutton clickhandleClick年龄自增/button/div
/templatescript
export default {model: {prop: address,event: change,},props: [address],methods: {handleClick() {this.$emit(change, this.address 1);},},
};
/script编译结果 以上。
