vue父子组件双向绑定
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>改变字体px大小title> 6 <script type="application/javascript" src="../js/vue.js">script> 7 head> 8 <body> 9 <div id="app"> 10 <button-change-text-font v-model="fontSize">button-change-text-font> 11 <div style="border-bottom: 1px dotted cadetblue">div> 12 font size from input = {{ fontSize }} 13 div> 14 body> 15 <script type="application/javascript"> 16 // 定义vue组件 17 Vue.component('button-change-text-font', { 18 props: ['textSize'], 19 template: '' + 20 ' ' + 21 ' ' + 22 ' show some text here!', 23 model: { 24 prop: 'textSize', 25 event: 'input' 26 } 27 }); 28 29 var vm = new Vue({ 30 el: '#app', 31 data: { 32 fontSize: 16, 33 } 34 }) 35 script> 36 html>
参考来源 自定义组件的 v-model 一节