Vuejs学习笔记(二)-8.子组件传值给父组件(自定义事件)
场景:用户进入首页,点击分类导航栏获取分类数据信息。
逻辑原理是:一般所有的网络请求是通过最外层的父组件发送给服务器,而用户对系统的操作都是对子组件的操作。比如用户点击分类导航栏(分类导航栏是子组件)获得指定分类中的数据,用户就需要子组件将请求数据(分类:手机数码)发送给父组件。由父组件请求服务器获取分类的数据(手机数码的产品数据),并将分类数据渲染到商品信息列表的子组件中。
数据信息传递的链路:点击子组件分类(手机数码)----->发送给父组件(整个分类主页面)------->父组件向服务器请求(手机数码)的分类数据---------->服务器返回分类数据列表给父组件------------>父组件将分类数据列表转给分类信息列表子组件展示。
因此子组件需要发送信息个父组件,我们来看下如何代码:
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 12-子组件传值给父组件.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/4 17:57 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>12-子组件传值给父组件</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>我是父组件:{{message}}</h2> 20 <p>-------------------父子组件分割线---------------------------------</p> 21 <categories-cpn @category-click="queryGoods"></categories-cpn> 22 </div> 23 <template id="categoriesCpn"> 24 <div> 25 <button v-for="category in categories" @click="categoryClick(category)"> 26 {{category.name}} 27 </button> 28 </div> 29 </template> 30 <script src="../js/vue.js"></script> 31 <script> 32 const categoriesCpn = { 33 template:'#categoriesCpn', 34 data(){ 35 return{ 36 categories:[ 37 {id:1,name:'热门推荐'}, 38 {id:2,name:'手机数码'}, 39 {id:3,name:'京东超市'}, 40 {id:4,name:'家用电器'} 41 ] 42 } 43 }, 44 methods: { 45 categoryClick(category) { 46 //伪实现 47 console.log(category.name); 48 this.$emit('category-click') 49 } 50 } 51 } 52 53 const app = new Vue({ 54 el:'#app', 55 data:{ 56 message:'父组件为分类页面' 57 }, 58 components:{ 59 categoriesCpn 60 }, 61 methods:{ 62 queryGoods(){ 63 console.log('queryGoods'); 64 } 65 } 66 }) 67 </script> 68 69 </body> 70 </html>
页面效果,点击每个子组件按钮,会在子组件中打印分类名称,且会将子组件的名称传给父组件,父组件会查询商品(queryGoods)
代码解释说明:
1.子组件为categoriesCpn,为分类列表,展示为button按钮,显示每个分类的名称。
2.当点击子组件的分类按钮时,会监听按钮点击事件,将当前按钮的对象传子组件的给categoryClick方法
3.categoriesClick方法内部展示了类型的名称console.log(category.name),且通过 this.$emit('category-click'),发射(创建)了一个事件名称,事件名称叫 category-click,该事件是子组件给其父组件传输数据的关联之一。
4.父组件调用子组件
首先使用的不是驼峰,而是-横杠,子组件的名称叫 categoriesCpn,而父组件使用子组件时,不能识别驼峰,所以用的是 categories-cpn
其次,在父组件调用子组件时,利用了上一步子组件创建事件,即监听子组件有没有发射该事件。
5.如果子组件发射(触发)了该事件,则调用父组件的queryGoods方法,查询商品信息。
以上就是子组件给父组件发送信息的一个简单的demo.
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14969745.html