我们都知道组件是vue里很重要的一个知识点，这里我看的是b站上的coderwhy老师的视频
我看到了弹幕上说很多人在这一块不理解；下面我就来写分享以下我的课程总结
父传子
为什么要进行“传”的这个操作？
答：父子就算绑定了，也子组件也无法用胡子语法将父组件里的内容显示到页面上
首先想要实现组件的父子通信，那么我们第一步要先创建一个子组件，与父组件绑定，那么先看以下原代码，我来逐步分析
<div class="bigbox"><!-- 这里要先将绑定的子组件使用以下，然后将父传给子 --><son :cfrsit="frist" :clast="last" :chello="hello"></son></div><template id='temp'><!-- 子 --><div><son>{{cfrist}}</son><br><son>{{clast}}</son><br><son>{{chello}}</son></div></template><script src="../vue文件/vue.js"></script><script>const son = {template: '#temp',props: {cfrist: {type: Object,// 这里代表是从父传来的是对象 默认值必须是一个函数default () {return {}},// 这里代表限定必须要在子标签里写传来的，否则报错required: true},clast: {type: Object,default () {return {}},required: true},chello: {type: String,default: ''}}}const father = new Vue({el: '.bigbox',data: {first: {name: 'qm',age: '20',address: '安徽'},last: {name: 'zjj',age: '21',address: '湖北'},hello: '我是一个字符串类型'},// 绑定子组件components: {son}})
1.首先创建一个子组件
const son = {template: '#temp',// 这里的props是用来接收父传过来的方法以及属性props: {}}
2.这里的template模板我是放在了上面定义
<template id='temp'><!-- 子 --><div><son>{{cfrist}}</son><br><son>{{clast}}</son><br><son>{{chello}}</son></div>
3.我们再创建一个父组件，并给予一个对象类型，且绑定我们刚才创建的子组件
const father = new Vue({el: '.bigbox',data: {first: {name: 'qm',age: '20',address: '安徽'},last: {name: 'zjj',age: '21',address: '湖北'},hello: '我是一个字符串类型'},// 绑定子组件components: {son}})
4.现在我们要进行 “父传子” 这里就是将父亲里的对象传给子组件，那么我们需要再子组件中使用 --> props这个内置对象来接收 ；这个内置对象里可以支持接收以下类型：
props: {cfrist: {// 这里代表父组件传来的是一个对象类型type: Object,// 这里代表是从父传来的是对象 默认值必须是一个函数default () {return {}},// 这里代表限定必须要在子标签里写传来的，否则报错required: true},clast: {type: Object,default () {return {}},required: true},chello: {type: String,default: ''}}}
那么以上代码肯定有很多疑惑
疑惑1：为什么这个子组件里是cfrist 和 clast 和chello呢 答：这里只是个给它起个名字而已
疑惑2：为什么chello和其他俩个的默认值定义的不一样呢 答：如果父组件传过来的是对象和数组类型，则默认值必须是以对象的形式返回，这一点很多人容易忽略
那么我们再往下走：
那我们现在是否已经完成了操作了呢？答案是否定的
因为只是接收了父亲传来的信息，我们还没有使用呢
5.我们刚刚只是将接收操作写完了，还没有进行真正意义上的传递呢；这里我们既然创建了一个子组件，那么我们就必须要使用，在这同时，我们要用v-bind的形式来进行动态赋值操作
<div class="bigbox"><!-- 这里要先将绑定的子组件使用以下，然后将父传给子 --><son :cfrsit="frist" :clast="last" :chello="hello"></son></div>
6.现在才算是真正意义上的已经完成了父传子的通信，现在子组件里的template已经可以使用胡须语法将父组件的内容显示到子组件里了
<template id='temp'><!-- 子 --><div><son>{{cfrist}}</son><br><son>{{clast}}</son><br><son>{{chello}}</son></div></template>
注：有很多b站的伙伴看coderwhy老师的课程在这里卡了壳，这是我的课程总结，希望能对屏幕前的你有所帮助；下面我们再来看看这个子传父又是个什么操作
子传父
子传父这个知识coderwhy老师是通过一个小案例来展开的，那我们来看看这个到底是怎么一回事
主要核心思想：
1.将编写好的子组件通过$emit（’自定义事件‘，item）发射一个自定义事件
2.实现子组件点击时，父组件能够接收到这个点击事件的对象，来定义一个方法实现某些功能
步骤：
1.还是要创建我们的子组件，编写好子组件功能后，将标签展现出来
<template id='temp'><div><button v-for="item in categories" style="display: block;margin-top: 20px;" @click = "itemclick(item)">{{item.name}}<!-- 这里要将item传过去，为了拿到id，并发射给父组件 --></button></div></template>
<script>// 创建子组件const cpn = {template: '#temp',data() {// 子组件是一个数组，里面添加了4个对象return {categories: [{id: 1,name: '商品'}, {id: 2,name: '购物'}, {id: 3,name: '客服'}, {id: 4,name: '退出'}, ]}},methods: {itemclick(item) {// 将点击的item传给父组件// 发射出去一个事件 父组件负责接收这个事件 这里的事件是自定义事件this.$emit('btn-click', item)}},}
2.我们已经创建好了一个子组件，我们要实现的是点击一下某个按钮，我每点击某个按钮，就会得到相应的categories数组里的某个对象，并让这个被点击的对象发射给父组件；
methods: {itemclick(item) {// 将点击的item传给父组件// 发射出去一个事件 父组件负责接收这个事件 这里的事件是自定义事件this.$emit('btn-click', item)}},
3.既然我们将这个对象发射出去了，那我们发射给谁？是不是父组件？是的；那我们现在就需要让父组件接收这个自定义事件；然后发射出去的这个对象，我们再让父组件做相应的操作，所以我们调用了一个cpnclick函数
<div class="bigbox"><!-- 将注册好的子组件使用起来 --><!-- 这里接收子组件点击事件 父组件要做对应的事情 --><!-- 这里系统会自动帮我们传过去一个item --><cpn v-on:btn-click="cpnclick"></cpn></div>
4.既然调用了cpnclick函数，那我们就需要封装这个函数，在哪里封装？我们想让父组件得到这个对象，实现某个功能，那么我们就需要再父组件里封装这个函数
const app = new Vue({el: '.bigbox',data: {},components: {cpn},methods: {cpnclick(item) {console.log('我是父组件里封装的函数', item);}}})
这里我们就已经实现了子传父这个操作
组件通信总结：
父传子
1.父传子就是使用props这个内置对象来帮我们接收父组件传过来的信息
2.子组件接收这个信息时要限定类型，默认值，
子传父
1.子传父就是使用$emit（ ' 自定义事件名 '，对象 ）发射出去被点击的那个子组件里的对象
2.父组件要来接收这个自定义对象，并且封装一个函数实现某种功能
