【Vue】父元件使用v-model，實現子父元件動態傳值。
阿新 • • 發佈：2018-12-10
前言：父元件與子元件直接的傳值會有些小問題，特別是動態傳值。
一、實現動態傳值
<body> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <div id="box"> <new-input v-model="name"></new-input> {{name}} </div> <script> Vue.component('new-input',{ props: ['value'], template:'<label><input type="text" v-model="newValue" /> 你的名字：</label>', computed:{ newValue: { get:function() { return this.value; }, set:function(value) { this.$emit('input', value); } } }, }); new Vue({ el:'#box', data: { name:'nick' } }); </script> </body>
執行結果
要理解該方法的關鍵是要知道v-model的實現原理。
二、v-model實現原理
<body> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <div id="box"> <input :value="name" @input="changeValue($event.target.value)"/> {{ name }} </div> <script> new Vue({ el:'#box', data: { name:'nick' }, methods:{ changeValue:function(value){ this.name = value; } } }); </script> </body>
這時就可以看出來了，我們通過['value']可以獲取到父元件給子元件傳遞的值，也可以用過註冊input方法方法來通過子元件給父元件傳值。