我们知道组件是vue的重要知识点。 这里正在看B站的coderwhy老师的视频
我在弹幕上看到很多人在这部分说不理解； 写下并分享以下我的课程总结
父亲传子为什么要做“传”这个操作？答：父子就算绑定了，也子组件也无法用胡子语法将父组件里的内容显示到页面上
首先想要实现组件的父子通信，那么我们第一步要先创建一个子组件，与父组件绑定，那么先看以下原代码，我来逐步分析
div class='bigbox '！ -现在按如下方式使用绑定的子部件，然后将父部件传递给子部件--- son : cfrs it=' frist ' : clast=' last ' 3360 chello=' hello '/- son 3360 cfrs it=' frist ' 3360 divtemplateid=' divtemplateid='--子代--- div son { { c frist }/sonb rson { { clast }/sonb rson { { chello } }/son vue scriptscriptconstson={ template : ' # temp '，props : { c frist : } type : object，//这里，由父级传递的是对象否则，required: true }、clast: { type: Object，default(}{return{}、required 3360 true )、chello : { type } default : ' } const father=newvue ({ El : '.big box '，data:{first3360} age:'20 '，adddress 360 '安徽)
const son={ template: '#temp '，/此处的props是从父代传递的方法和属性props:{}}http://www.Sina.com/
template id='temp '！ ---子--- div son { { c frist } }/sonb rson { { clas }
t}}</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.父组件要来接收这个自定义对象，并且封装一个函数实现某种功能