vue组件-template和slot插槽详细介绍

前言

vue项目，组件应用非常广泛，感觉只要能被多个地方复用的代码，都可以写成组件，这样不用做重复的工作。github上面也有很多大牛制造了n个轮子，方便大家使用。之前也有总结过vue组件集合，没有了解的同学请点击《vue插件总结——总有你能用上的插件》。今天详细介绍vue组件该怎么用?怎么写?

怎么用

vue组件开发好后，在父组件中引用，并在components注册，引用方式通过from，如

import NavHeader from '../components/NavHeader.vue'
import NavFooter from '@/components/NavFooter.vue'
import NavBread from '@/components/NavBread.vue'

components: {
	NavHeader,
	NavFooter,
	NavBread
}

import后的为引入后的组件名，其中@表示是src,通过@不用一层层往上找目录，可以直接写，@的配置在webpack.base.conf.js中。

组件引入后在要在父组件中用标签的形式写入子组件，写入的方式（在templat中要将组件的名称改为小写，两个单词直接加“-”）：

<nav-header></nav-header>
<nav-footer></nav-footer>

如果你直接写入标签，没有引入的话，会报错

vue.js:564 [Vue warn]: Unknown custom element: <nav-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in <Detail> at D:\xxx\xxx.vue)

slot插槽

怎么给大家解释一下slot插槽了？

将父组件的内容放到子组件指定的位置叫做内容分发，这就是slot插槽的作用，就是父组件引用子组件的同时，把父组件的内容放到子组件里面去。感觉有点绕，大家看代码
比如我在子组件NavHeader中定义了一个slot标签，如下：

<div class="content">
	<slot></slot>  //子组件NavBread
</div>

在父组件中的该组件(nav-bread)名称里直接写需要的内容

<nav-bread>
  <span slot="bread">web秀</span>
</nav-bread>

这时候编译的代码就是这样的

<div class="content">
  <span>web秀</span>
</div>

如果需要多个插槽，slot用name属性标识。在在父组件中的该组件名称(nav-bread)里的内容中加上“slot=“name值””

<slot name="bread"></slot>  //name值为bread
<slot name="test"></slot>

<nav-bread>
	<span slot="bread">web秀</span> //slot值为bread
	<span slot="test">Javan</span>
</nav-bread>

结语

前面小编也有封装过vue组件，《VUE开发一个组件——移动端弹出层（IOS版）》、《VUE开发一个组件——日历选择控件》，感兴趣的同学，可以去git上面看看源码。

同时提示小程序开发的小伙伴，mpvue小程序组件开发时，slot是不支持动态参数的。切记切记。
也可以看《mpvue小程序框架的优缺点》