您当前的位置:首页 > 前端 > vue > vue插槽slot,用法及作用
vue插槽slot,用法及作用
日期:2021-08-08 21:14:49 浏览:292
Vue插槽的作用就是存放内容
当我们在子组件内没有书写slot标签时,父组件内书写<One></One>里面的内容是无效的
v-slot写在template标签上,新语法
一 :当父组件v-slot后面定义的名字在子组件内name属性后面的名字找不到时,父组件template标签内的内容默认不显示
二: 当父组件v-slot后面没有定义名字时,系统默认定义为default (即 v-slot:defalut) ,他会去匹配子组件slot标签没有名字的
三 : v-slot可以用#代替,作用是一样的
<template #two>
<a href="#">提交啦</a>
</template>
四: 子组件的数据传递到父组件内容
v-slot:four,和子组件的<slot name="four"></slot>要相同
父组件
<One>
//我们定义一个subdata变量,(变量名随意),用来接收子组件内传递过来的数据
<template v-slot:four="subdata">
//users为子组件内的变量名
<a href="#">{{ subdata.users.name }}</a>
</template>
</One>
子组件
<template>
<h6>{{ title }}</h6>
//这里的:users为定义的变量名,父组件接收时要用到
<slot name="four" :users="users"></slot>
</template>
<script>
export default {
name: "One",
data:()=>{
return {
title:"我是ONE组件的标题",
users:{
name:'提交吧'
}
}
}
}
</script>
总结
template v-slot =后面定义的名字和slot标签name定义的值,如果没有找到,优先显示<slot></slot>标签的内容,如何找到就显示template里面的内容
上一篇: 判断是否为ajax请求
下一篇: pdo操作数据库