第九十一篇：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