zoukankan      html  css  js  c++  java
  • Vue组件上使用v-model双向绑定

    首先要明确它就是个语法糖 
    <input type="text" :value= 'name' @input='name = $event.target.value'>
    
     <p>{{name}}</p>
    
    上面这个功能和v-model是一致的
    你自己也可以用@input监控输入的结果 就可以找到target下面的value
    下面有一个场景
    要实现一个搜索模糊匹配功能,考虑到组件的复用,就单独把搜索框抽出来作为一个子组件。在以往的开发中,一般会在input框中的值变化时向父组件emit一个事件,并带上一些父组件中需要的参数(比如搜索的关键词,或者搜索之后返回的结果)

    大概的实现方式如下:

     父组件
    <template>
        <div>
            <search v-model="keywords"></search>
            <button @click="submit">提交</button>
        </div>
    </template>
    <script>
    import search from '@/components/index/search.vue'
    export default {
        data() {
            return {
                keywords: ''
            }
        },
        components: {
            search
        },
        methods: {
            submit() {
                console.log('keywords:', this.keywords)
            }
        }
    }
    </script>
    
    子组件
    <template>
        <div>
            <input :value="value" @input="$emit('input', $event.target.value)" type="text" name="keywords">
        </div>
    </template>
    <script>
    export default {
        props: ['value']
    }
    </script>

    下面用v-model实现(相当于把上面两部给结合了使用)

    v-model这个双向绑定相当于做了两个操作:
    1、给当前这个组件添加了一个value属性 
    2、给当前这个组件绑定了一个input事件
    其实两种思路是一样的,都是子组件通过emit事件向父组件传值
    父组件
    <template>
        <div>
            <search v-model="keywords"></search>
            <button @click="submit">提交</button>
        </div>
    </template>
    <script>
    import search from '@/components/index/search.vue'
    export default {
        data() {
            return {
                keywords: ''
            }
        },
        components: {
            search
        },
        methods: {
            submit() {
                console.log('keywords:', this.keywords)
            }
        }
    }
    </script>
    
    
    子组件
    <template>
        <div>
            <input :value="value" @input="$emit('input', $event.target.value)" type="text" name="keywords">
        </div>
    </template>
    <script>
    export default {
        props: ['value']
    }
    </script>
  • 相关阅读:
    微信小程序 功能函数 把数字1,2,3,4换成春,夏,秋,冬
    微信小程序组件 滚动导航
    微信小程序 功能函数 openid本地和网络请求
    微信小程序组件 自定义弹出框
    Log4j
    UTF-8 setup for workspace
    outlook preview setup
    eclipse 背景颜色
    sqldeveloper 英文设置
    shell spool
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/12300978.html
Copyright © 2011-2022 走看看