标签：作用域 匿名 内容替换 注意 标签 重用 显示 行操作 指定
slot: 插槽。它是组件的一块html模板，这块模板显示不显示以及怎样显示是由父组件来决定的。它用于决定将所携带的内容，插入到指定的某个位置，从而使用模板分块。具有模块化的特性。
slot可以看成是一个空盒子，它显示与隐藏，用什么样的html模板都是由父组件来控制的，它自己本身不能决定，他显示的位置是由子组件自身来决定的。就自己的理解，我们可以通过slot向子组件的内部指定位置传递内容，它可以在子组件中占好位置，当使用这个组件时，组件标签里面的内容就会通过父组件里的设置进行填充。
匿名slot: 当子组件模板只有一个没有属性的slot时，父组件整个内容片断将插入到slot所在的DOM位置，并且替换slot标签。它可以放在子组件的任意位置。
<template>
<div>
<h2>父组件</h2>
<myslot>
<!-- 在组件中插入p标签和其内容 -->
<i>这里我插入了内容</i>
</myslot>
</div>
</template>
<script>
//引入
import slot from "./mySlot.vue";
export default {
name: "xxx",
data() {
return {};
},
components: {
myslot
}
};
</script>
<style lang=‘less‘>
</style>
-----------------------------------
<template>
<div>
<h2>子组件</h2>
<!-- 当父组件中有替代的内容就把slot替换
没有的话就默认使用slot中的内容替换slot
-->
<slot>
<p>父组件中没有插入内容时，我就是默认内容</p>
</slot>
</div>
</template>
具名slot: <slot>元素它可以用一个特殊的属性name来配置如何分发内容，多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素。
在具名slot中，还是可以有一个匿名slot的，它是默认的slot，作为找不到匹配的内容的备用插槽。匿名slot只能它只能是没有slot属性的元素的插槽，有slot属性的元素如果没有配置slot则会被抛弃。
如果子组件中又有具名slot还有匿名slot，父组件中的所有不带slot属性的htlml标签会被当成一个整体，替换子组件中的slot标签。
<template>
<div>
<h2>父组件</h2>
<myslot>
<!-- 这个p会替换子组件中name为first的slot标签 -->
<p slot=‘fisrt‘>匹配第一个slot的内容</p>
<!-- 这个p会替换子组件中name为last的slot标签 -->
<p slot=‘last‘>匹配最后一个slot内容</p>
<!-- 它会替换子组件中没有name的slot标签 -->
<p>其它内容</p>
</myslot>
</div>
</template>
----------------------------------------------------------------
<template>
<div>
<h2>子组件</h2>
<slot name="first">first</slot>
<slot name="last">last</slot>
<slot></slot>
<slot>默认值</slot>
</div>
</template>
或者是可以用v-slot来进行操作。v-slot:插槽名等同于<标签名 slot="插槽名">,但是它只能用在template上。v-slot可以简写成#。
<template>
<div>
<h2>父组件</h2>
<myslot>
<template v-slot:first>
<p>first</p>
</template>
</myslot>
</div>
</template>
---------------------------------
<template>
<div>
<h2>子组件</h2>
<myslot>
<slot name=‘first‘></slot>
</myslot>
</div>
</template>
作用域插槽：它是一种特殊类型的带数据的插槽。使用一个数据可重用模板替换已渲染好的元素。需要注意是的新版本的写法。
slot-scope=‘用户自己起的名字‘，这个名字对应的值是子组件(<slot:自定义属性=‘xxx’</slot>)中的在slot上所有行内属性组成的对象。
<template>
<div>
<h2>父组件</h2>
<child :list=‘ary‘>
<!-- <h1 slot-scope="aaa">{{aaa}}</h1> -->
<!-- 老版本写法 -->
<!-- <h1 slot-scope="aaa">{{aaa.www}}</h1> -->
<!-- 新版本写法 -->
<template #default=‘aaa‘>
<h1>{{aaa.www}}</h1>
</template>
</child>
</div>
</template>
<script>
import childApp from ‘./childApp‘
export default{
name: ‘App‘,
data(){
return {
ary:[1,2,3,4,5,6,7]
}
},
components:{
"child":childApp
}
}
</script>
<style lang=‘less‘>
</style>
<template>
<div>
<h2>子组件</h2>
<ul>
<li v-for="i in list" :key="i">
<slot :www="i"></slot>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "childApp",
//用props接收父组件传过来的值
props: ["list"],
data() {
return {};
},
components: {}
};
</script>
<style lang=‘less‘>
</style>
标签：作用域 匿名 内容替换 注意 标签 重用 显示 行操作 指定
原文地址：https://www.cnblogs.com/davina123/p/13365318.html
