发布时间:2024-03-22 14:01
目录
首先创建两个子组件,soltOne是基础使用,soltTwo是域名插槽使用,soltThree是演示父组件获取子组件内容,图片后的代码一定要注意,容易出现很多细节上的小问题。
import SoltOne from './components/soltOne.vue'
import SoltThree from './components/soltThree.vue'
import SoltTwo from './components/soltTwo.vue'
export default {
name: 'app',
components: {
SoltOne,
SoltTwo,
SoltThree
},
在子组件中使用 <slot></slot>给值留下位置,可以得到父组件的值
<template>
<div>
<strong>ERROR:</strong>
<slot></slot>
</div>
</template>
<script>
export default {
name:'soltOne'
}
</script>
<style>
</style>
<solt-one>有Bug发生</solt-one>
以上就是插槽的最基本的使用
这里,我简单的划分了三个区域,一个头部,内容,尾部
头部和尾部 <slot></slot>都给上了name:‘’让其获得域名
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name:'soltTwo'
}
</script>
<style>
</style>
在此内容下,p标签内只要对应子组件起的name名,就能把值赋值到想要的地方,没有name名的将会赋值到,子组件中没有name名的位置。
<solt-two>
<p slot="header">头部信息</p>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot="footer">尾部信息</p>
</solt-two>
父组件还有一种,可以通过域名来实现插槽,使用v-slot:来获取子组件的域名,从而指定赋值,其中也可以添加多条内容,比上一种方法更完善。
<solt-two>
<template v-slot:header>
<p>头部信息1</p>
<p>头部信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template v-slot:footer>
<p>尾部信息1</p>
<p>尾部信息2</p>
</template>
</solt-two>
这里的顺序是根据子组件的顺序排列,父组件跟换域名位置,还是按照子组件的域名排序出现
内容会跟着父组件发生改变
<solt-two>
<template v-slot:footer>
<p>头部信息1</p>
<p>头部信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template v-slot:header>
<p>尾部信息1</p>
<p>尾部信息2</p>
</template>
</solt-two>
这里需要注意的是,要将子组件的值进行v-bind绑定
<template>
<div>
<slot :son="list">
</slot>
</div>
</template>
<script>
export default {
name:'soltThree',
data(){
return{
list:[1,2,3,4,5,6,7,8,9]
}
}
}
</script>
<style>
</style>
一下提供了四种,子组件的值可以使用v-for遍历,这里的list1是自己新起的名字,son是子组件绑定的,slot-scope这种方法逐步出现了淘汰, #default这种方法比较推荐,看起来就很简单好记
<solt-three>
<template v-slot="list1">
<div>{{list1.son}}</div>
</template>
</solt-three>
<solt-three>
<template v-slot:default="list1">
<div>{{list1.son}}</div>
</template>
</solt-three>
<solt-three>
<template #default="list1">
<ul>
<li v-for="(item,index) in list1.son" :key="index">{{item}}</li>
</ul>
</template>
</solt-three>
<solt-three>
<template slot-scope="list1">
<div>{{list1.son}}</div>
</template>
</solt-three>
父组件替换插槽的标签,但是内容是由子组件来提供。
当组件需要在多个父组件多个界面展示的时候,将内容放在子组件插槽中,父组件只需要告诉子组件使用什么方式展示界面。
<template >
<div>
<slot :data="pLanguage">
<ul>
<li v-for="(item, index) in pLanguage" :key="index">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
export default {
name:'oneText' ,
data() {
return {
pLanguage:['JavaScript','Java','C++','C']
}
},
}
</script>
<style>
</style>
<one-text></one-text>
<one-text>
<template #default="slot">
<span>{{slot.data.join(' - ')}}</span>
</template>
</one-text>
<one-text>
<template #default="slot">
<p><span v-for="(item, index) in slot.data" :key="index">{{item}}</span></p>
<span>{{slot.data.join(' * ')}}</span>
</template>
</one-text>
【机器学习系列】【调参GridsearchCV】随机森林、GBDT、LightGBM和XGBoost调参顺序,外加一些加速调参的小技巧(主要介绍坐标下降)
Cannot read properties of undefined (reading ‘push‘) 问题
windows安装Docker与docker-compose套装
wallys/QCA9882/Access Point Wireless AC/AN MiniPCIE Card
Python机器学习笔记:异常点检测算法——Isolation Forest
边无际 Shifu IoT 开源开发框架 助力物联网应用开发加速十倍