床上爱做网站,品牌seo公司,vs 2015 网站开发,建站外贸企业官网推广本节主要介绍一下 v-slot 插槽指令#xff0c;以及插槽相关内容
1、定义#xff1a;
子组件给父组件提供使用的一个位置#xff0c;使用slot/slot表示#xff0c;父组件可以在这个位置填充任何代码#xff1b;
2、默认插槽
匿名插槽#xff1a;会自定…本节主要介绍一下 v-slot 插槽指令以及插槽相关内容
1、定义
子组件给父组件提供使用的一个位置使用slot/slot表示父组件可以在这个位置填充任何代码
2、默认插槽
匿名插槽会自定渲染一个 #default插槽将没有声明的名称的内容放入default中
template
!-- 子组件 --div classchildh2子组件/h2slot默认内容/slot // 内容会渲染到slot中/div
/template!-- 父组件 --
templatediv classparh3父组件/h3Child匿名插槽内容将会渲染到子组件的slot中/Child // 此处无内容时会渲染子组件中的默认内容/div
/template如图
可以看到父组件下的 Child中的内容会自动渲染到 子组件中的slot中 如果父组件中的Child中没有内容则会自动渲染子组件中 slot 中的默认内容如果父组件中的Child中有内容则会替代子组件 slot 中的默认内容
3、具名插槽
具名插槽就是为要渲染的内容指定一个位置让其待着指定的位置父组件会根据具名插槽的(slotheader 或者 #header)会渲染到子组件中相同名称的插槽中 具名插槽可以有多个不同名称的插槽而匿名插槽只能有一个同时在父组件中没有声明的插槽内容都会渲染到子组件的匿名插槽中
template
div classparh3父组件/h3!-- Child template #:header父组件渲染的具名插槽/template/Child --Child template v-slot:header父组件渲染的具名插槽/template/Child // #header表示具名插槽的名字 简写方式/div
/template
script setup
import Child from ./components/childSlot.vue
/scripttemplate!-- 子组件 --div classchildh2具名插槽/h2slot nameheader/slot/div/template4、动态插槽
动态插槽名就是插槽名变成了变量的形式我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。 templatediv classparh3父组件/h3Child template v-slot:[slotName]动态插槽/template/Child /div/templatescript setupimport Child from ./components/childSlot.vueconst slotName ref(foot) // 声明动态插槽名称为 子组件的插槽名渲染到foot插槽名中/script5、作用域插槽
作用域插槽就是父组件进行增删改查操作向子组件传递数据同时子组件通过插槽获取数据同时子组件可以修改数据然后再通过插槽返回给父组件
template!-- 子组件 --div classchildh2子组件/h2h2作用域插槽/h2slot text作用域插槽2222 /slotslot text具名插槽作用域 namefoot2/slot/div/templatetemplatediv classparh3父组件/h3Child v-slot{text}{{text}} // 作用域插槽渲染出来的内容是“作用域插槽2222”/Child Child !-- 具名插槽 作用域 --Child template #foot2foot2Props{{foot2Props.text}} // 作用域插槽渲染出来的内容是“具名插槽作用域”/template/Child /div/template
