标签：Vue 作用域 第九十 App vue 插槽 组件 Article

好家伙,

 

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

 

标签：Vue,作用域,第九十,App,vue,插槽,组件,Article
来源： https://www.cnblogs.com/FatTiger4399/p/16350196.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。