<!DOCTYPE html><html lang="zh"><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"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Vue自学：组件子传父操作</title></head><body> <!-- 这里是个父组件 --> <div id="app"> <!-- 使用v-on，但是绑定的属性是this.$emit所发送过去的监听事件，并非普通的click事件 --> <cpn v-on:item-click="cpnclick"></cpn> </div></body> <!-- 这里是子组件模板 --><template id="cpn"> <div> <!-- 这里所使用的categories，是data这个函数内的遍历对象 --> <!-- v-on:click事件，用于绑定一个item,发送给父组件 --> <button v-for="item in categories" v-on:click="selfbtn(item)">{{item.name}}</button> </div></template><script type="text/javascript"> //子组件 const cpn = { // 绑定模板 template:'#cpn', // 设置数据：必须为函数格式 data(){ // 返回的是一个数组对象类型的数据 return { categories:[ {id:'aaa',name:'kai'}, {id:'bbb',name:'da'}, {id:'ccc',name:'liang'}, {id:'ddd',name:'bian'} ] } }, methods:{ //绑定了点击时间，形参为item selfbtn(item){ //this.$emit('绑定新的事件','传递过去的值') this.$emit('item-click',item) } } } //父组件 const app = new Vue({ el:'#app', data:{ }, components:{ //绑定的对象增强写法 cpn }, methods:{ //将item传递过来 cpnclick(item){ console.log('cpnclick',item) } } })</script></html>
