组件（二）

提供/注入（组件链传值）

当我们需要将数据从父组件传递到子组件时，可以使用props实现。

但有时有些子组件是深嵌套的，如果将props传递到整个组件链中，将很麻烦，更不可取。

对于这种情况，可以使用provide和inject实现组件链传值。父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深，父组件有一个provide选项来提供数据，子组件有一个inject项来使用这个数据。

单插槽slot

在子组件模板中，可以使用单插槽slot设置默认渲染内容。

<template id="child">    

        <slot>        

                <p>插槽内容，默认内容！</p>    

        </slot>

</template>

多个具名插槽

使用多个具名插槽可以实现混合渲染父组件的内容与子组件的模板。

作用域插槽

有时让插槽能够访问组件中的数据是很有用的。

作用域插槽更具代表性的用例是列表组件。

 <li v-for="post in posts">            

        <!--要使post可为父组件blog-post（slot为子组件）提供的slot内容，可以添加一个<slot>元素并将post绑定为属性-->            

        <slot :postgo="post"></slot>    

</li>

动态组件

在不同组件之间进行动态切换是常见的场景，比如在一个多标签的页面里进行内容的收纳和展现。Vue可通过<component>元素动态挂载不同的组件，进行组件切换。

<component :is="currentView"></component>

异步组件 

在大型应用中，我们可能需要将应用分割成许多小的代码块，并且只在需要时才从服务器异步加载一个模块。

这样可以避免一开始就把所有组件加载，浪费非必要的开销。

Vue有一个 defineAsyncComponent方法将组件定义为一个工厂函数，动态地解析组件。

Vue只在组件需要渲染时触发工厂函数，并把结果缓存起来，以备再次渲染。

使用ref获取DOM元素和组件引用

有时需要直接引用组件或DOM元素。为此，可以使用ref为子组件或HTML元素指定引用ID。

引用HTML元素的示例代码如下：

<input ref="input" />

 引用组件的示例代码如下：

<input ref="usernameInput" />