<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
