Vue组件通信&插槽&ElementUI

一、组件通信

• 什么是组件通信？

  组件通信是指组件与组件之间的数据传递

1. 父传子

   父组件传递数据给子组件

2. 子传父

   子组件中的数据传回给父组件

3. 组件之间的传递

   组件与组件之间可以任意传递

4. 父组件与子组件

   在当前组件（父组件）中引入另一个组件（子组件）并且进行声明和使用，就叫父子关系

• 父传子

  ①在父组件中调用子组件时，定义属性，将属性值传入子组件中
  ②在子组件中定义 props 属性，接收从父组件传入进来的数据
  ③将接收到的数据显示在页面上

• 子传父

  ①在子组件中通过 $emit 触发父组件的自定义事件，并传入数据（子组件）
  ②在父组件中调用子组件的位置设置自定义事件
  ③定义事件处理函数，将子组件的值作为参数传入

• 组件之间的数据传递（总线bus）

  ①在main.js中创建一个空Vue实例，并挂载到Vue原型上成为总线 $bus
  ②在需要将数据传递出去的组件中，触发总线事件 this.$bus.$emit()，同时传递数据
  ③在需要数据的组件中，绑定总线事件 this.$bus.$on()，触发事件时就能获取到传递过来的数据

二、插槽slot

• 什么是插槽？

  插槽也是一个数据传输方式，在父组件中使用子组件时，将子组件标签对中间的内容作为插槽的内容传递到子组件中
  子组件通过 slot 标签进行获取和使用

1. 默认插槽

   如果没有传数据进去，则以默认值为准

2. 具名插槽

   ①在父组件中使用子组件时，子组件标签对中间可以写其它标签，并且用 slot属性命名
   ②在子组件中，可以使用<slot name="名称"><slot>，使用对应的具名插槽

3. 作用域插槽

   ①在子组件中设置作用域数据
   <slot 属性名 =值 属性名2=值2></slot>
   ②在父组件中使用slot-scope接收到数据，并使用
   <h3 slot-scope="scope">{{scope.属性名}}</h3>

4. v-slot指令

   作用
   简化作用域插槽的写法

<hello>
	<template v-slot:body="scope">
		<h3>我来组成身体，姓名：{{scope.username}}，年龄：{{scope.age}}岁</h3>
	</template>
</hello>

三、ElementUI

• 什么是 elementui？

  elementui是饿了么前端团队开发出来的一套基于vue2.0的桌面端组件库

1. 安装element-ui

   npm i element-ui

2. 配置和注册

   ①在main.js中引入element-ui
   import ElementUI from ‘element-ui’;
   ②引入全局样式
   import ‘element-ui/lib/theme-chalk/index.css’;
   ③注册全局组件
   Vue.use(ElementUI);

3. 使用elementui

   打开官方网站，找到组件，复制代码粘贴到页面上