Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性
Posted haonanzhang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性相关的知识,希望对你有一定的参考价值。
Vue高级特性
一、自定义v-model实现Vue的双向数据绑定
父组件中
<p>{{name}}</p> <custormModel v-model="name" />
data() { return { // 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定 name: ‘颜色‘ } }, components: { custormModel }
组件custormModel
<input type="text" :value="strName" @input="$emit(‘change‘, $event.target.value)" >
1、上边的 input 使用了 :value 而不是 v-model
2、上边的 change 要和 model.event 对应起来
3、:value 要和 model.prop 对应起来
export default { model: { prop: ‘strName‘, // 对应 props strName event: ‘change‘ }, props: { strName: String, default(){ return ‘‘ } }, data() { return {} } }
二、$nextTick refs
1、Vue是异步渲染
2、data改变之后,DOM不会立刻渲染;(这就是异步渲染的概念)
3、$nextTick 会在 DOM 渲染之后被触发,以获取最新 DOM 节点
(也就是说,data改变之后你想操作DOM这个时候,有可能是拿不到DOM的,因为2,所以就要用 $nextTick)
vue 中获取DOM元素 <div refs="ul1"></div>
methods: { add(){ // 获取 DOM 原色 const ulElem = this.$refs.ul1; this.$nextTick( () => { // 数据改变之后 待新DOM渲染完成之后的回调 }) } }
以上是关于Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性的主要内容,如果未能解决你的问题,请参考以下文章