.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="external nofollow" rel="external nofollow" 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="external nofollow" rel="external nofollow" 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方法.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
