学习笔记——Vue中的插槽技术

---

在vue中，我们调用子组件的时候，可能会对子组件的某一部分代码进行修改，使得子组件能更好的满足我们的需求。有了插槽技术，我们就可以在父组件调用时，让子组件中的结构更好的适应当前组件。

 插槽技术：

1.默认插槽(匿名插槽）：

该插槽比较笨重，适合简单练连续的插入。template模板中的内容会被插入slot占位符中，如果有多个占位符，都会插入一遍template中的内容。

// 父组件
<div>这是父组件
    <Younger :list="list">
        <template>
            <span>要插入的内容</span>
		</template>
    </Younger>
</div>


data: function() {
    return {
        list: [1,2,3,4]
    };
},
components: {
    Younger
},

// 子组件
我是子组件
<ul>
    <li v-for="item in list">
        <span v-text="item"></span>
		<slot></slot>
	</li>
    <slot></slot>
</ul>


// 插槽执行后的html结构
<div>这是父组件
    我是子组件
    <ul>
        <li v-for="item in list">
            <span v-text="item"></span>
		    <span>要插入的内容</span>
	    </li>
        <span>要插入的内容</span>
    </ul>
</div>

运行结果：

2.具名插槽：

给占位符slot一个name属性，父组件调用时，template模板要用v-slot:name属性指定插入特定的插槽，没有v-slot的模板视为默认插槽，无法插入具名插槽中。

v-slot: [动态插槽名]，也可以缩写，例如v-slot:header 等于 #header。

// 父组件
这是父组件
<Younger :list="list">
    <template v-slot:one>
        <span>这是插槽：one要插入的内容</span>
	</template>
	<template v-slot:two>
		<span>这是插槽：two要插入的内容</span>
	</template>
	<template>
		<span>这是插槽：two要插入的内容</span>
	</template>
</Younger>


// 子组件
我是子组件
<ul>
    <li v-for="item in list">
        <span v-text="item"></span>
		<slot name="one"></slot>
    </li>
    <slot name="two"></slot>
</ul>

运行结果：

3.作用域插槽：

有时候，我们需要给子组件中的插槽传递值，让子组件进行展示。其过程是，父组件先给子组件传递一个值data，而我们在父组件中的模板中也需要用到这个值，但却不能直接用父组件中的data，这样会造成值得不同步。最好的办法就是让子组件再将data传到模板template中，我们就可以接受data值，并调用。注意：子组件传过来的值是一个对象，键名为model。

// 父组件
这是父组件
<Younger :list="list">
    <template slot-scope="{ model  }">
		<span>这是插槽：one要插入的内容</span> |
		<span>传过来的值为：{
   
   {model}}</span>
	</template>
</Younger>

// 子组件
我是子组件
<ul>
    <li v-for="item in list">
        <span v-text="item"></span>
		<slot :model="item"></slot>
	</li>
</ul>

 运行结果为：

插槽简而言之就是子组件为父组件准备的一个占位符。父组件可以在template中书写任何代码来替换这个占位符。这样可以是代码更加优雅。