第九十一篇:Vue 具名插槽作用域
好家伙,
1.作用域插槽
插槽在定义的时候,可以定义一些属性,便于在父组件中使用
来看看代码:
Article.vue组件中:
<template>
<div class="article-container">
<!-- 文章内容 -->
<div class="header-box">
<!-- 在封装组件时,为预留的<slot></slot>提供对应的值,
这种用法叫做"作用域插槽" -->
<slot name="title" msg="我是msg属性"></slot>
</div>
<!-- 文章标题-->
<div class="content-box">
<slot name="content"></slot>
</div>
<!-- 文章作者 -->
<div class="footer-box">
<slot name="author"></slot>
</div>
</div>
</template>
App.vue组件中:
<template>
<div>
<h1>App根组件</h1>
<Article>
<template #title="obj">
<h3>我是头</h3>
<p>{{ obj }}</p>
</template>
<template #content>
<h3>写博客真是一件开心的事情(NO)</h3>
</template>
<template #author>
<h3>作者:养肥胖虎</h3>
</template>
</Article>
</div>
</template>
截图如下:
msg的值是在子组件中定义的,
父组件中拿到msg的值,
再在子组件中把它渲染出来,
无形中完成了一次子父传值
2.作用域插槽的结构赋值
将Article.vue组件中的代码改为:
<template>
<div class="article-container">
<!-- 文章内容 -->
<div class="header-box">
<!-- 在封装组件时,为预留的<slot></slot>提供对应的值,
这种用法叫做"作用域插槽" -->
<slot name="title" msg="我是msg属性" :user="userinfo"></slot>
</div>
<!-- 文章标题-->
<div class="content-box">
<slot name="content"></slot>
</div>
<!-- 文章作者 -->
<div class="footer-box">
<slot name="author"></slot>
</div>
</div>
</template>
<script>
export default {
name:'Article',
data(){
return{
//用户信息对象
userinfo:{
name:'zs',
age:20
}
}
}
}
</script>
于是在父组件中,可以使用解构方法调用值:
在App.vue组件中:
<template>
<div>
<h1>App根组件</h1>
<Article>
<template #title="{ msg,user }">
<h3>我是头</h3>
<p>{{ msg }}</p>
<p>{{ user }}</p>
<p>{{ user.name }}</p>
</template>
<template #content>
<h3>写博客真是一件开心的事情(NO)</h3>
</template>
<template #author>
<h3>作者:养肥胖虎</h3>
</template>
</Article>
</div>
</template>
搞定后:
That's all