当前位置：首页 > news >正文

如何查询网站的注册信息查询品牌营销策划英文

news 2025/11/4 17:31:53

如何查询网站的注册信息查询,品牌营销策划英文,做基因检测网站,一个人完成网站建设插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。匿名插槽 1.在子组…

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

匿名插槽

1.在子组件放置一个插槽

<template><div><slot></slot></div>
</template>

父组件使用插槽

在父组件给这个插槽填充内容

        <Dialog><template v-slot><div>2132</div></template></Dialog>

具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中

    <div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>

父组件使用需对应名称

        <Dialog><template v-slot:header><div>1</div></template><template v-slot><div>2</div></template><template v-slot:footer><div>3</div></template></Dialog>

插槽简写

        <Dialog><template #header><div>1</div></template><template #default><div>2</div></template><template #footer><div>3</div></template></Dialog>

作用域插槽

作用域插槽由子组件暴露值出来

在子组件动态绑定参数派发给父组件的slot去使用

    <div><slot name="header"></slot><div><div v-for="item in 100"><slot :data="item"></slot></div></div><slot name="footer"></slot></div>

通过结构方式取值

         <Dialog><template #header><div>1</div></template><template #default="{ data }"><div>{{ data }}</div></template><template #footer><div>3</div></template></Dialog>

动态插槽

插槽可以是一个变量名

<template><h2>动态插槽动态更改插槽名</h2><Ten><template #[name]><div>我在哪儿</div></template></Ten>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import Ten from "./components/ten.vue";
// let name = ref("header");
let name = ref("footer");
// let name = ref("default");
</script>

子组件

<template><div class="header"><slot name="header"></slot></div><div class="main"><slot></slot></div><div class="footer"><slot name="footer"></slot></div>
</template><style lang="scss" scoped>
div {width: 100%;height: 100px;
}
.header {background: antiquewhite;
}
.main {background: aqua;
}
.footer {background: pink;
}
</style>

效果图：

12 vue3之异步组件&代码分包&内置组件suspense和teleport-CSDN博客文章浏览阅读23次。12 vue3之异步组件&代码分包&内置组件suspense和teleporthttps://blog.csdn.net/qq_37550440/article/details/142329387?sharetype=blogdetail&sharerId=142329387&sharerefer=PC&sharesource=qq_37550440&spm=1011.2480.3001.8118