VUE自定义组件中用.sync修饰符与v-model的区别

.sync修饰组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-03</title>
    <!-- 引入Vue -->
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>

<body>

    <div class="container" style="margin-top: 12px;">
        <div id="demo" class="row">
            {{ say }}
            <br />
            <my-input :value.sync="say"></my-input>
        </div>
    </div>


    <script>
        new Vue({
            el: '#demo',
            data: {
                say: "123"
            },
            components: {
                "my-input": {
                    props: ['value'],
                    template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}</div>",
                    watch: {
                        value: function(newValue, oldValue) {
                            alert('子组件value新旧值' + newValue + '/' + oldValue);
                            //this.$emit('update:value', newValue)
                        }

                    },
                    methods: {
                        change1: function(e) {
                            var v = e.target.value
                            this.$emit('update:value', v)
                        },

                    }
                }
            },
            watch: {
                say: function(n, o) {
                    alert('父组件新旧值' + n + '-' + o)
                }
            },
            methods: {

            }
        })
    </script>
</body>

v-model修饰组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-10</title>
    <!-- 引入Vue -->
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>

<body>

    <div class="container" style="margin-top: 12px;">
        <div id="demo" class="row">
            {{ say }}
            <br />
            <my-input v-model="say"></my-input>
        </div>
    </div>


    <script>
        new Vue({
            el: '#demo',
            data: {
                say: "123"
            },
            components: {
                "my-input": {
                    props: ['value'],
                    template: "<div><input v-bind:value='value' v-on:input='change' />{{value}}</div>",
                    watch: {
                        value: function(newValue, oldValue) {
                            alert('子组件value新旧值' + newValue + '/' + oldValue);
                            //this.$emit('update:value', newValue)
                        }

                    },
                    methods: {
                        change: function(e) {
                            this.$emit('input', e.target.value)
                        }
                    }
                }
            }
        })
    </script>
</body>

区别只能自己慢慢体会,个人感觉 .sync用法灵活,而v-model只能接受prop名为为value的值.
两者都需要手动触发$emit方法.

VUE自定义组件中用.sync修饰符与v-model的区别

Jason_and_Lisa

引用和评论

vue实现一个6个输入框的验证码输入组件

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号