我们都知道组件是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.父组件要来接收这个自定义对象，并且封装一个函数实现某种功能