.sync修飾組件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue-03</title> <!-- 引入Vue --> <link 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 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方法.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
