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高级特性的主要内容,如果未能解决你的问题,请参考以下文章

Vue学习Vue高级特性

vue 自定义组件使用v-model

vue自定义组件实现v-model双向绑定

vue 自定义v-model的组件 修饰符无效,需要改怎么做!

Vue的双向绑定以及组件的自定义事件

Vue组件的操作-自定义组件,动态组件,递归组件