关于javascript:Vue自定义组件实现vmodel指令

在咱们首次接触 Vue 的时候，肯定会理解到一个语法糖，那就是 v-model 指令，它带给咱们的第一印象就是它能够实现双向绑定

那么，什么是双向绑定？艰深一点来说，就是当数据发生变化的时候，视图同时发生变化，这能够说是 Vue 的精华之处了（不过对于双向绑定，后续能够出一篇更为详尽的博文来深刻模仿一下 Vue 的实现，这里重点还是探讨实现自定义组件的 v -model 指令）

所以，在咱们深刻应用 Vue 之后，编写一个自定义组件，如何手动实现一个 v-model 的指令呢，明天咱们就来具体探讨一下

v-model指令的原理是什么？

1. v-bind绑定一个 value 属性
2. v-on监听以后元素的 input 事件，当数据变动时，将值传递给 value 实时更新数据

v-model和 v-bind:value 有什么区别？

自定义组件中，必定会应用 v-bind 指令来实现组件之间值的传递，所以在我还是菜鸟的那段时间，我始终有个纳闷，既然有的 v-bind 指令，为什么还须要在自定义的组件中实现 v-model 指令呢？在我实际了一番之后，我才明确，v-model既可能实现值的传递，也可能实现页面数据的实时变动，而 v-bind 只是实现值的传递，如果须要实现实时变动的成果，须要应用另外的办法批改变量的值，能够总结为上面两点

1. v-model实现视图和数据的双向绑定，一者变动另一者也会同时变动
2. v-bind只会在初始化化的时候将数据绑定到视图上，后续视图变动不会影响数据

撸一个v-model

看到这里，置信你也了解了为什么咱们会须要在自定义的组件中自定义一个 v -model 指令，上面咱们通过一个繁难的示例来撸一个 v-model，在此之前咱们须要在一个空Vue 我的项目中，定义一个 dad.vue 文件，以及 child.vue 文件。为了不便初学者学习，我将一个残缺的繁难示例我的项目放到了 github 仓库中供大家下载学习，大家如果喜爱能够为了点一颗 Star，Thanks♪(･ω･)ﾉ！！！

<span id=”jumpId-dad”></span>

dad.vue

<template>
    <div>
        <child v-model='childName'></child>
    </div>
</template>

<script>
    import child from './child.vue';
    export default {
        name: 'dad',
        components: {child},
        data() {
            return {childName: '我是儿子'};
        },
        methods: {}};
</script>

<span id=”jumpId-child”></span>

child.vue

<template>
    <!-- vue 中的自定义组件中，若父组件中用 v -model 的话，其实相当于 v -bind:value='***' 并且 v -on:input='***' -->
    <!-- 因而子组件外部用 props 接管 value 值，用 $emit 触发 input 事件，默认传递 value 值和 input 事件是模仿 v -model 的默认规定 -->
    <!-- 基础知识提醒：@是 v -on 监听事件的简写，: 是 v -bind 绑定属性的简写 -->
    <div class="box-v-model">
        <input type="text" class="input-v-model" :value="value" @input="inputChange" />
        <!-- 简写的形式 -->
        <!-- <input type="text" @input="value=$event.target.value" :value="value" /> -->
        <div>{{value}}</div>
    </div>
</template>

<script>
    export default {
        name: "child",
        props: {
            value: {type: String}
        },
        methods: {
            // $emit 办法能够触发以后实例上的事件，这里触发的事 input 事件，附加参数都会传给监听器回调
            // input 事件在用户输出时触发，它是在元素值发生变化时立刻触发
            inputChange(e) {this.$emit("input", e.target.value);
            }
        }
    }
</script>

参考文档一 ———— vue 自定义组件中的 v -model
参考文档二 ———— Vue 中 v -model 和 v -bind:value 的区别以及手动实现 v -model
参考文档三 ———— Vue 官网文档对于 $emit 的阐明

我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文 github 仓库地址，为我点一颗 Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！