一、父子传值
eg：
<body> <div class="app"> <appstar :name="title"></appstar> </div> </body> <script> Vue.component('appstar',{ props:['name'], template:`<div>{{name}}</div>` }) new Vue({ el:'.app', data:{ title:'茶缸' } }) </script> `` 注意：在父传子时，props和data中的定义属性不要重名。 props中的属性是只读的，data中定义的属性是可读可写的。 二、 子传值给父 子通过$emit发射一个函数给父类 ```javascript <body> <div class="app"> // @back="backs" 相当于回调函数 <appstar @back="backs"></appstar> </div> </body> <script> Vue.component('appstar',{ template:`<div>{{title}}</div>`, data:function(){ return{ title:'茶缸' } }, methods: { back(){ this.$emit('back',this.title) } }, }) new Vue({ el:'.app', data:{ }, methods: { backs(name){ console.log(name); } }, }) </script>三 兄弟传值 例如;
<body> <div class="app"> <carname :name='carnames' @carn="cname"></carname> <carlist :list="carlists"></carlist> </div> </body> <script> Vue.component('carname', { props: ['name'], template: `<select v-model="car"> <template v-for="car in name"> <option :value="car">{{car}}</option> </template> </select>`, computed: { car: { get: function () { return this.name[0]; }, set: function (newVlaue) { return this.$emit('carn', newVlaue); } } }, }); Vue.component('carlist',{ props:['list'], template:` <ul> <template v-for="lis in list"> <li>{{lis}}</li> </template> </ul> ` }) new Vue({ el: '.app', data: { car: '奔驰', cars: { '奔驰': ['c200', 'c260', 'c300', 'e260', 'e300', 's320', 's400', 's500', 's600'], '奥迪': ['A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q5', 'Q7', 'Q8'], '宝马': ['320', '520', '760', 'X1', 'X2', 'X3', 'X5', 'X6', 'X7'] } }, methods: { cname(a) { this.car = a; console.log(this.car); } }, computed: { carnames() { return Object.keys(this.cars); }, carlists(){ return this.cars[this.car]; } }, }) </script>