手动实现vue组件间input双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue</title> <script src="https://cdn.bootcss.com/vue/2.6.3/vue.js"></script> </head> <body> <div id="app"> </div> <script> var temOne = { props:['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, methods: { handleInput (e) { this.$emit('input', e.target.value) } } } var vm = new Vue({ el: '#app', data: { value: '123' }, components: { temOne }, template: ` <div> {{value}} <tem-one :value="value" @input="value = arguments[0]"></tem-one> <tem-one v-model="value"></tem-one> <!-- v-model语法糖、有点费解。 --> </div> ` }) </script> </body> </html>
编辑:--ns868