（十三）setup中第二个参数context
（十三）setup中第二个参数context
老怪兽
发布于 2023-02-22 18:13:42
发布于 2023-02-22 18:13:42
代码可运行
运行总次数：0
代码可运行
setup 中第二个参数 context 中的 slots 属性
一、context 中的 slots
说明
setup 的第三个参数主要是用于渲染函数访问父组件传递过来的 slots 如果不使用渲染函数，可以跳过这章
使用渲染函数来编写模板
- 子组件使用渲染函数 来渲染模板
<!-- <template>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
</template> -->
<script>
import { h } from "vue";
export default {
setup(props, { slots }) {
// console.log(slots);
console.log(slots.header);
console.log(slots.default);
return () => [
h("header", {}, slots.header()),
h("main", {}, slots.default()),
];
},
};
</script>2. 父组件传递模板
<!-- 父组件传递模板 -->
<template>
<main>
<div>
<BaseLayout>
<!-- 这里是模板 -->
<template v-slot:header>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
</template>
<template v-slot:default>
<p>这是内容</p>
</template>
</BaseLayout>
</div>
</main>
</template>
<script>
import BaseLayout from "./components/BaseLayout.vue";
export default {
components: {
BaseLayout,
},
};
</script>
二、context 的另外一个属性 attrs
说明
它用来获取没有在 props 中定义的其他属性
- 父组件
<template>
<main>
<div class="container">
<MessageList class="messageList" :test="test" data-title="消息列表" />
</div>
</main>
</template>2. 子组件，我们可以看到，单独打印 attrs 他是一个 proxy 的值说明它是一个响应性的值，而直接打印它里面的某个值是直接打印出来，说明它的属性值不是一样响应性的数据，如果使用结构语法来结构出 attrs 的值，它的值也会失去响应性
setup(props, { attrs }) {
// 打印父组件冲传递的props 未接收的属性
console.log(attrs)
console.log(attrs.class);
// 如果有中划线，所以需要使用中括号来访问
console.log(attrs["data-title"]);
}
总结：写在最后
总结
attrs 它本身是响应性的，它里面的属性不是，所以使用结构语法结构出来的属性也不是响应性的
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年11月9日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
