一、父子组件传值
(1) VUE项目中的父子组件之间的传值。
父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。
Vue.config.productionTip = false
// Child1组件
Vue.component('Child1', {
// 通过$parent返回的是父组件对象
template:`
房产信息
{{$parent.house.address}}
{{$parent.house.size}}
组件中的数据，必须是一个函数，由函数返回一个对象
data() {
return {
name:'张杰',
age:25
}
},
mounted() {
console.log('子级1mounted');
},
created() {
console.log('子级1created');
},
})
// childSon组件
Vue.component('Childson',{
// $parent获取父组件对象
// $root获取根组件对象
template:`
房产信息
{{$parent.$parent.house.address}}
{{$parent.$parent.house.size}}
{{$root.house.address}}
{{$root.house.size}}
`
})
Child2 组件
Vue.component('Child2', {
template:`
汽车信息
{{$parent.car.name}}
{{$parent.car.color}}
`,
data() {
return {
name:'张飞',
age:23
}
},
mounted() {
console.log('子级2mounted');
},
created() {
console.log('子级2created');
},
})
Vue.component('Child3', {
template:`
存款信息
{{$parent.money.value}}
{{$parent.money.bank}}
`,
data() {
return {
name:'张强',
age:20
}
},
mounted() {
console.log('子级3mounted');
},
created() {
console.log('子级3created');
},
})
暂且将#app对应的内容当成根组件
new Vue({
el:'#app',
//数据
data:{
house:{
address:'名城世家3栋1单元1101室',
size:'150平米'
},
car:{
name:'奔驰S400',
color:'黑色'
},
money:{
value:'150W',
bank:'中国建设银行'
},
//接收子组件的数据的对象
son1:{
name:'',
age:0
},
son2:{
name:'',
age:0
},
son3:{
name:'',
age:0
}
},
mounted() {
console.log('父级mounted');
// 注意：在父子级的mounted生命周期函数内，才能获取到$children信息
// $children返回的是所有子组件对象的数组
// console.log(this.$children);
/* this.son1.name = this.$children[0].name
this.son1.age = this.$children[0].age
this.son2.name = this.$children[1].name
this.son2.age = this.$children[1].age
this.son3.name = this.$children[2].name
this.son3.age = this.$children[2].age */
// $refs返回的是一个对象，对象中包含所有带有ref属性的组件
// console.log(this.$refs);
this.son1.name = this.$refs.son1.name
this.son1.age = this.$refs.son1.age
this.son2.name = this.$refs.son2.name
this.son2.age = this.$refs.son2.age
this.son3.name = this.$refs.son3.name
this.son3.age = this.$refs.son3.age
},
created() {
console.log('父级created');
},
})
子组件向父组件传值
那么我们延伸一下，子组件怎么向父组件传值？
- 基本概念
在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
每个Vue实例都实现了事件接口：使用emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
- 举例说明
父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。
子组件传来的值 : {{message}}
子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。
这样我们就基本实现了子组件向父组件发送值了
小结
通过"props down , events up"我们就简单的实现了父子组件之间的双向传值，这是很基本的知识点，其它还有$invoke等等方法，大家可以去官网好好看看。
关于通信和状态管理就必须了解vuex了，后面我们在项目中当涉及了再好好讲。
二、第三方组件库element-ui
网址：https://element.eleme.cn/#/zh-CN
（1）引入
第三方组件库element-ui
在Elment网站中选择需要的组件复制过来
主要按钮
成功链接
首页
活动管理
活动列表
活动详情
用户管理用户管理用户管理用户管理用户管理
配置管理配置管理
配置管理
- 配置管理
- 配置管理
- 配置管理
定时任务补偿
定时任务补偿
定时任务补偿
定时任务补偿
接上
效果图如下：
三、第三方组件库iview
网址：http://v1.iviewui.com/
（1）引入iview的样式,在页面上引入 js 和 css 文件即可开始使用：
(2）引入Vue
(3)引入iview
(4)快速使用 View UI 写出一个示例：
四、第三方组件库Vant
网址：http://vant-contrib.gitee.io/vant/#/zh-CN/
使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。
引入样式文件
主要按钮
五、父子组件配合开发
示例：
组件化的核心思想:
如果我们将一个应用程序所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；
并且在真实开发中，我们会有很多的内容和代码逻辑，项目扩展性和可维护性是非常差的；
所以，在真实的开发中，我们会对组件进行拆分，拆分成一个个功能的小组件。
所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；再将这些组件组合嵌套在一起，最终形成我们的应用程序
我们可以按照如下的方式进行拆分：
按照如上的拆分方式后，我们开发对应的逻辑只需要去对应的组件编写就可
组件的通信
在开发过程中，我们会经常遇到需要组件之间相互进行通信,根据组件之间的关系可以分为父子组件通信和非父子组件通信。
在一个Vue项目中，组件之间的通信是非常重要的环节，所以接下来我们就具体学习一下组件之间是如何相互之间传递数据的
父子组件之间通信的方式
父子组件之间如何进行通信呢？
父组件传递给子组件：通过props属性；
子组件传递给父组件：通过$emit触发事件；
父组件传递给子组件
在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：
这个时候我们可以通过props来完成组件之间的通信；
什么是Props呢？
Props是你可以在组件上注册一些自定义的attribute；
父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值；
Props有两种常见的用法：
1.字符串数组，数组中的字符串就是attribute的名称；
2.对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默认值等等；
具名插槽
// 在组件内部通过slot标签定义插槽，在通过name属性给插槽定义名字，这样的插槽称之为：具名插槽。
// 插槽的默认名称是：default。如果有多个插槽，允许其中一个插槽不定义名称。
Vue.component('b-box', {
template:`
我是组件
