component多个 vue_【Vue】component

Vue组件

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

使用hello-world组件

全局组件

组件名在 html 中使用连字符命名，在 vue 文件中则可以使用小驼峰式和大驼峰式命名

组件在 html 中无法使用单标签，在 vue 文件中则可以使用单标签

通过 template 模板描述组件的结构，在组件内通过 data 声明组件内可以使用的数据，组件最外层只能有一个包裹的根标签，不能有两个并行的标签

需要注意的是组件中的数据必须用函数形式返回，使各组件实例拥有各自独立的数据，发生改变时不会影响其他组件。

局部组件

与全局组件基本相同

组件 props 属性

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

在 props 中声明的组件可使用的数据对象中，可以通过 type 规定该数据的类型，如果传递的数据类型不符则会打印警告。类型警告

通过 required 设置属性是否必须，如果未取得该属性，则打印警告。

未取得必要属性警告

通过 validate可以对属性进行校验，如果属性没有通过校验则同样会打印警告。属性校验未通过警告

通过 default 可以为属性设置默认值，在未传递属性值时将使用默认值。如果使用引用值如数组和对象作为默认值，则需要使用函数返回，否则对引用值的改变会时其他组件中的值改变

组件Demo

使用组件生成一个百度搜索热点

首先将整个搜索热点分解为两个组件：热点列表 news-list 和它的子组件 news

news-list：

news-list 组件为一个 ul 标签包含一个标题和子组件 news

props 中 newsList 用于接收热点数据数组

热点数据包含热点标题，热点搜索量以及一个唯一标识 id，通过 v-for 遍历数据列表生成对应子组件

将 key 绑定为数据列表中的唯一标识 id

绑定 ranking 用于生成热点序号

绑定 title 用于生成对应标题

绑定 index 用于生成点击量

news：

news 组件为每一条热点信息，包含一个 li，li 中分为左右两部分两个 div，左边的 div 用于显示热点排名和热点标题，右边的 div  用于显示热点点击量，左右显示通过弹性盒子 flex 的 justify-content：space-between 实现。

props 中 ranking 用于接收热点数据中的排名

title 用于接收热点数据中的热点标题

index 用于接收热点数据中的点击量

data 用于提供一个热点排名前三对应的类名用于显示不同的排名样式

created() 生命周期函数用于在组件被创建完毕后将热点前三对应的类名数据返回

组件间通信

父组件→子组件

1.$attrs：props 中未被注册的属性

2.$parent：组件的父级实例，可通过该属性直接从父级组件实例或 Vue 实例中直接取数据而不需要使用 props 注册，不推荐使用而是作为应急使用

$children：组件的子组件实例，在挂载完毕后才能获取到

3.provide-inject：父组件直接向子组件提供数据的方式，不仅限于直接子组件，孙子组件同样可以通过该方式获取数据，缺点是不易找到数据来源，依然不推荐使用

子组件→父组件

1.$children (不推荐)

2.引用  $refs

在 dom 上添加引用通过 $refs 取得 dom 元素

在组件上添加引用通过 $refs 取得的是组件的实例，通过组件实例则可以使用组件上的数据和方法

3.在子组件中调用父组件方法，通过传参实现数据传递

4.直接在组件 dom 上绑定事件调用父组件方法(不推荐)

5.通过 $listeners 获取组件上事件绑定的函数并调用

6.通过 $emit 直接触发组件上绑定的事件来调用父组件的方法

兄弟组件

如果照目前来看，兄弟组件之间传递数据，似乎只能先传递给父级，再通过父级向下传递到兄弟组件，可有点麻烦。万一需要传到兄弟组件的子组件或者孙子组件，那可跑了个大圈了，我觉得不行，所以兄弟组件之间肯定还有什么其他的解决方案来进行通信。

event bus 事件总线

通过父级传递数据如果层级比较深那么需要进行的操作就会很多，那么不通过父级，另外找一个中转站呢？如果可以通过(组件1 → 中转站 → 组件2)这样来传递，那么无论多少层之间的数据传递，都可以简化成两次传递。

那么这个中转站就是关键了，event bus 事件总线 lei 了。

事件总线是个啥呢，其实也是一个 Vue 实例，他就是一个事件中心，组件通过事件传参的方式传递数据，将事件推送到事件中心，然后兄弟组件通过监听事件来获取传递的参数从而取得数据。

这看起来好像就是一个发布-订阅模式，将带数据的事件发布到事件中心，然后由其他组件从事件中心订阅取得数据。

首先创建一个事件总线

创建组件

现在要从 myInput 组件的子组件 son 向 myContent 传递数据

myInput 的子组件 son，通过按钮绑定点击事件 showData，触发事件后向事件中心 bus 传递 show 事件并传递参数 Asuna

在 myContent 组件上通过生命周期函数 created 触发事件中心 bus 中的 show 事件，接收数据 Asuna

可以看到差值表达式中 Asuna 的值已更新