zoukankan      html  css  js  c++  java
  • 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渲染完成之后的回调
                    })
                }
            }
  • 相关阅读:
    ajax设置自定义请求头
    tomcat修改端口号
    下载文件(前端+后台)
    ajax请求超时判断(转载)
    js判断变量类型
    js中判断是否包含某个字符串
    Java将json字符串转成map
    Linux上安装设置mysql 5.7.24
    js格式化json字符串和json对象
    bootstrap中的data-toggle模态框相关
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/12557908.html
Copyright © 2011-2022 走看看