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: '<div><button>curent text size {{ textSize }}px</button>' +
20             '    <input type="text" v-model="textSize" v-on:input="$emit(\'input\', $event.target.value)">' +
21             '    </br>' +
22             '    <span :style="{fontSize: textSize + \'px\'}">show some text here!</span></div>',
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 一节

posted @ 2020-11-25 10:00  一朵野生菌  阅读(277)  评论(0)  编辑  收藏  举报