006-v-model原理-优快云博客

本文链接：https://blog.youkuaiyun.com/loveEveryWeb/article/details/136563592

v-model原理

简介
v-model应用在输入框上
v-model应用在组件上

简介

由属性绑定(v-bind:value=“searchText”) 配合 input事件监听(v-on:input=“searchText = event.target.value”) 实现。
应用在组件上由 props: {value: xxx } ，this.$emit(‘input’, xxx ) 完成。

v-model应用在输入框上

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <!-- 等同于 -->
        <input type="text" :value="msg1" @input="msg1 = $event.target.value">
        <div>{{ msg }}</div>
        <div>{{ msg1 }}</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '123',
                msg1: 'abc',
            },
            methods: {},
            computed: {},

        });
    </script>
</body>

数据更新时，需要页面同步更新：Vue属性绑定实现；
页面更新时，需要数据同步更新：监听input事件实现；

v-model应用在组件上

<body>
    <div id="app">
        <div>v-model 父组件：{{modelInputText}}</div>
        <component-model v-model="modelInputText"></component-model>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 注册全局组件
        Vue.component('component-model', {
            template: 
                `<div>
                    <input type="text" :value="value" @input="updateVal" />
                    <br />
                    <span>v-model的子组件：{{value}}</span>
                </div>`,
            props: ['value'],
            data: function () {
                return {
                    text: 'componentOneText'
                }
            },
            methods: {
                updateVal(event) {
                    this.$emit('input', event.target.value);
                }
            }
        })

        var app = new Vue({
            el: '#app',
            data: {
                modelInputText: 'hello v-model !',
            },
            methods: {},
            computed: {},

        });
    </script>
</body>

数据更新时，需要父组件同步更新：this.$emit(‘input’, xxx )；
父组件更新时，需要子组件同步更新：props: {value: xxx }；