Vue插槽的使用

Vue中插槽的使用

如果大家经常使用vue组件化开发，相信对slot一定不陌生，slot顾名思义就是插槽的意思，就是原来这里没有位置，我用slot占一个坑。可能这么说大家有些不明白，那我就直接上代码介绍吧，这样就简单明了。

子组件：

// child.vue
<template>
    <div>
        <div>今天的天气：</div>
        <slot />
    </div>
</template>  

父组件：

// father.vue
<template>
    <child>
        <div>阳光明媚，万里无云</div>
    </child>
</template>
<script>
import Child from './child';

export default {
    components: {
        Child
    }
};
</script>

浏览器渲染结果：

渲染的DOM元素：

如果没有插槽，父组件不变，子组件改为：

// child.vue
<template>
    <div>
        <div>今天的天气：</div>
    </div>
</template>  

那么浏览器的渲染结果就是：

来看看渲染的DOM元素：

这么一对比我们就可以很直白的看到插槽的作用，如果子组件中没有slot，父组件无法在子组件中插入模板或HTML元素。
知道插槽的作用了，那么接下来就像大家介绍下3种插槽：默认插槽，具名插槽，作用域插槽

默认插槽：

不需要给插槽加任何属性，直接使用slot标签。

子组件：

// child.vue
<template>
	<div>
		<div>
			helloWorld
		</div>
		<slot/>
	</div>
</template>

父组件：

// father.vue
<template>
    <child>
        <div>你好，世界</div>
    </child>
</template>
<script>
import Child from './child';

export default {
    components: {
        Child
    }
};
</script>

具名插槽：

当需要使用多个插槽的时候我们就不能使用默认插槽了，需要添加一个name属性来区分各个插槽。如果使用默认插槽，其实默认插槽的name属性就是default，当多个插槽都使用默认插槽的时候就无法达到我们想要的效果。例子：

子组件：

// child.vue
<template>
    <div>
        <div>头部</div>
        <slot name="head" />
        <div>内容</div>
        <slot name="content" />
        <div>尾部</div>
        <slot name="foot" />
    </div>
</template> 

父组件

// father.vue
<template>
    <child>
        <div slot="head">
            我是头部
        </div>
        <div slot="content">
            我是内容
        </div>
        <div slot="foot">
            我是尾部
        </div>
    </child>
</template>
<script>
import Child from './child';

export default {
    components: {
        Child
    }
};
</script>

浏览器渲染效果：

通过具名插槽的使用，将插入的内容插入到想要的位置中。具名插槽是平时组件化开发项目中用到最多的插槽类型。还有最后一种就是作用域插槽。

作用域插槽：

作用域插槽主要就是将数据传递给插槽，在使用插槽时，就能将插槽的数据通过props拿出来使用，但需要在调用子组件中另加一个模板中定义一个属性scope=“props”。有点像使用props，父组件自定义属性，子组件通过props接收数据。具体使用如下：

子组件：

// child.vue
<template>
    <div>
        <div>我是子组件</div>
        <slot data="我是来自子组件的数据" />
    </div>
</template>  

父组件：

<template>
    <div>
        我是父组件
        <child>
            <template scope="props">
                <div>{{ props.data }}</div>
            </template>
        </child>
    </div>
</template>
<script>
import Child from './child';

export default {
    components: {
        Child
    }
};
</script>

浏览器渲染结果：

值得注意的一点就是，作用域插槽是将子组件数据传递给父组件，而vue中父组件像子组件传值的时候，props的作用是接收父组件传的值，这点是截然相反的。