<!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"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div> <div> {{ 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 + 'https://www.jb51.net/' + 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"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div> <div> {{ 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 + 'https://www.jb51.net/' + oldValue); //this.$emit('update:value', newValue) } }, methods: { change: function(e) { this.$emit('input', e.target.value) } } } } }) </script> </body>
区别只能自己慢慢体会,个人感觉 .sync用法灵活,而v-model只能接受prop名为为value的值.
两者都需要手动触发$emit方法.