标签：实例 UNC 属性 size rop data title component -o
vue中：
1.父级传递给子级：父级v-bind一个属性，里边存放数据（value），子级js中props接收一个数组[]，以此来传递。
2.子级传递给父级：父级@（v-on）一个函数func_father，子级也@一个函数click,在子级js中函数中触发父级函数func_father，从而子级操作，父级改变。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <div id="counter-event-example"> 11 <p>{{ total }}</p> 12 <button-counter v-on:increment="incrementTotal"></button-counter> 13 <button-counter v-on:increment="incrementTotal"></button-counter> 14 </div> 15 </div> 16 17 <script> 18 Vue.component(‘button-counter‘, { 19 template: ‘<button v-on:click="incrementHandler">{{ counter }}</button>‘, 20 data: function () { 21 return { 22 counter: 0 23 } 24 }, 25 methods: { 26 incrementHandler: function () { 27 this.counter += 1 28 this.$emit(‘increment‘)//传到父级中的@监听事件，以此触发个数加一 29 } 30 }, 31 }) 32 new Vue({ 33 el: ‘#counter-event-example‘, 34 data: { 35 total: 0 36 }, 37 methods: { 38 incrementTotal: function () { 39 this.total += 1 40 } 41 } 42 }) 43 </script> 44 </body> 45 </html>
标签：实例 UNC 属性 size rop data title component -o
原文地址：https://www.cnblogs.com/liuyuweb/p/9879221.html
