Vue:自定义v-model数据双向绑定

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mouday/article/details/100578613

示例

age 数据单向绑定
name 数据双向绑定


<template>
    <div>
        <h3>单向绑定数据</h3>
        <p>age: {{ age }}</p>
        <p>age: <input type="text" :value="age"></p>
        
        <h3>双向绑定数据</h3>
        <p>name: {{name}}</p>
        <p>name: <input type="text" :value="name" @input="name=$event.target.value"></p>
    </div>
</template>


<script>
export default {
    data(){
        return {
            age: 23,
            name: "王小二"
        }
    }
}

</script>

在这里插入图片描述
观察代码发现,name的input 多了一个事件绑定@input="name=$event.target.value"
所以,实现数据双向绑定的原理就是:

1、数据name单向传递给input;
2、input触发事件后将name的值进行了修改

自定义v-model双向绑定

child.vue

<template>
    <input type="text" :value="age" @input="change($event.target.value)">
</template>


<script>
export default {
    props: ["age"],

    model: {
        prop: "age",     // 对应的变量
        event: "change"  // 触发事件
    }, 

    methods: {
        // 把修改后的值传递回去
        change(value){
            console.log(value)
            this.$emit('change', value)
        }
    }
}

</script>


main.vue

<template>
    <div>
        <h3>子组件v-model示例</h3>

        <p>age: {{age}}</p>

        <p>age: <Child v-model="age"/></p>
    </div>
</template>


<script>
import Child from './child.vue';

export default {
    components: {
        Child
    },

    data(){
        return {
            age: 23,
        }
    }
}

</script>


启动调试

$ vue serve main.vue

在这里插入图片描述
这样就实现了自定义v-model语法
原理很简单

1、父组件给子组件传值
2、子组件值修改,触发事件修改父组件值
3、父组件再将新值传递给了子组件,子组件的接收到父组件变更的值

所以还是数据还是单向流动

参考:

  1. Vue之自定义组件的v-model
  2. vue自定义组件上的v-model如何与子组件数据绑定

文章创建于: 2019-09-06 14:24:21
展开阅读全文

v-model双向绑定

06-21

<p>n <span style="color:#333333;"><span style="font-size:16px;"><strong>【课程介绍】</strong></span></span>n</p>n<p>n <span style="color:#333333;"><span style="font-size:16px;">课程目标:从零基础到学会实战开发vue项目</span><br /><span style="font-size:16px;">适用人群:会基础HTML,CSS,JS</span><br /><span style="font-size:16px;">接口后台:python</span><br /><span style="font-size:16px;">课程特色:提供项目接口,用python开发,提供短信验证码接口,接口和文档永久有效,学生的项目上线后可直接访问,可当做面试作品和大学生毕业设计</span></span><span style="color:#333333;"> </span><span style="font-size:16px;"></span>n</p>n<p>n <span style="font-size:16px;"><br /></span>n</p>n<p>n <span style="font-size:16px;"><strong>【课程收益】</strong></span>n</p>n<p>n <span style="font-size:16px;">1.从零基础掌握vue开发</span>n</p>n<p>n <span style="font-size:16px;">2.掌握vue组件思维<br /></span>n</p>n<p>n <span style="font-size:16px;">3.了解什么是前后端分离开发</span>n</p>n<p>n <span style="font-size:16px;">4.学会请求数据</span>n</p>n<p>n <span style="font-size:16px;">5.学会vue高级功能使用</span>n</p>n<p>n <span style="font-size:16px;">6.做出一个完整的上线项目</span>n</p>n<p>n <span style="font-size:16px;">7.课程可当做大学生毕业设计</span>n</p>n<p>n <span style="font-size:16px;">8.课程可当做面试作品</span>n</p>

没有更多推荐了,返回首页