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>