2.v-model 用在组件中_v-model在组件中使用-CSDN博客

本文链接：https://blog.csdn.net/lzb348110175/article/details/88934686

在 Vue.js 中，经常会使用 v-model 实现表单的双向数据绑定功能。

在双向数据绑定功能方面，v-model看着还是比较简单。但是v-model用到组件中之后，会发现瞬间就有点懵圈了。不知道

v-model用到组件里面，到底是怎么的一个处理方式。接下来，将会具体分析v-model是如何在组件中使用的：

v-model 其实是两个指令的结合。（v-bind:value 和 v-on：input ）

v-model 用于组件中的官方文档：

　使用自定义事件的表单输入组件

从上面官方文档克制：v-model仅仅就是一个语法糖而已。真正实现v-model功能的还是如下两点：

1.v-bind：绑定响应式数据

2.触发input事件 @input 并传递数据（核心和重点，input框有个input事件，用于监听数据的改变）

大体就是:

　　监听原生组件的事件, 当获取到原生组件的值后，再通过调用 $emit('input' ,data) 方法去触发 input事件

即：子组件向父组件传值通过this.$emit('input',data），父组件通过@input来接收。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字输入框组件</title>
</head>
<body>
    <div id="app">
        <span>父组件数值：{{data}}</span><hr>
        <button @click="modifyNumber">修改number数值</button><hr>
        //1.v-model="data"等价于 v-bind:value="data" 加 v-on:input="data"(即：@input="data")
        <input_component v-model="data" :min-value="1" :max-value="10" tip1="你你你，你还能点哦" tip2="不能点了吧？？？？"></input_component>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        Vue.component('input_component',{
            props:{
                //2.子组件必须接受一个名为value的属性，因为v-model会绑定一个value属性(:value="data")
                //接下来，在组件中将会通过this.value来进行相关数据的操作
                value:{
                    type:Number,
                    default:0
                },
                minValue:{
                    type:Number,
                    default: -Infinity
                },
                maxValue:{
                    type:Number,
                    default:Infinity
                },
                tip1:{
                    type:String,
                    default:"请继续点"
                },
                tip2:{
                    type:String,
                    default:"不能点了哦"
                }
            },
            template:'<div>' +
                '   <input type="text" :value="value">' +
                '   <button @click="btnIncrease" :disabled="maxValue<=value" :title="[maxValue<=value?tip2:tip1]">+</button>' +
                '   <button @click="btnDecrease" :disabled="minValue>=value" :title="[minValue>=value?tip2:tip1]">-</button>' +
                '</div>',
            methods:{
                btnIncrease:function () {
                    this.value++;
                },
                btnDecrease:function () {
                    this.value--;
                }
            },
            watch:{
                //3.监听事件，此处监听到currentValue值有变化，则通过this.$emit('input',val)会将值传递到父组件，因为v-model会触发一个input事件(@input="data")
                value:function (val) {
                    this.$emit("input",val)
                }
            }
        })

        var app = new Vue({
            el:'#app',
            data:{
                data:3
            },
            methods:{
                modifyNumber:function(){
                    this.data -=5;
                }
            }
        })
    </script>

</body>
</html>

附：Vue篇目录：

1.Vue组件之间传值问题 2.v-model 用在组件中

3.Vue.js 实战调查问卷WebApp项目 4.vue-cli + webpack搭建Vue开发环境

5. Vue简单问题汇总(持续更新...) 6.Vue组件之间数据通信之Bus总线

7.Vue-Router导航钩子(附Demo实例) 8.ES6箭头函数与普通函数的区别

9.Vuex的使用 10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数

11.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题

12.Vuex命名空间namespaced 13.Vue axios的使用

---->如有疑问，请发表评论，或者联系博主：lzb348110175@163.com，欢迎哦^_^