奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 面试题 >

Vue插槽slot的三种使用解答

时间:2019-04-07 12:31来源:未知 作者:admin
当父组件向子组件传值的时候,有时候,父组件传的并不是单纯的数值、字符串,有可能是带标签(DOM)的数据,那么如何传值呢? 如果我们像正常父向子传值那样操作。 slott content=

.插槽

在父组件中直接插入正常的DOM结构

 <slott>
     <p>你好solt!</p>
 </slott>

   
然后在子组件用<slot>来代替,所以说slot是保留字,不能当做id的

<template>
    <div class="slott">
    <slot></slot>
  </div>
</template>
<script>
export default{
   props:['content'],
   data(){
    return{
      content1 : this.content,
   }
 } 
</script>

.引入header组件
在实际开发中,我们经常会遇到一种情况,将 header和footer传进来。
在父组件中:

<slott>
   <div>header</div>
   <div>footer</div>
</slott>

在子组件中:

   <slot></slot>
   <div>content</div>
   <slot></slot>



 这是为什么呢?slot标签代表的显示插槽的所有的内容,那如何达到我们想要的效果呢?我们可以用具名插槽。
父组件的插槽中命名。

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


在子组件引用名称

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


 附:slot标签可以有默认值,如果找不到相关的插槽,就会显示默认值。
在插槽中去掉header

<slott>
   <div slot="footer">footer</div>
</slott>


在调用的时候找不到header的话,就会显示默认的内容

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


 .作用域插槽
有时候,我们在使用插槽的时候,希望父组件可以控制插槽的内容,

什么时候用作用域插槽呢?当子组件做循环或者某一部分它的DOM结构应该由外部传递进来的时候,这个时候我们用作用域插槽

使用作用域插槽,子组件会向父组件的作用域里传递数据。
父组件使用插槽,要包含在template标签中。props是自定义的名字
eg:

<slott>
    <template  slot-scope="props">
    <h1>{{props.item}}</h1>
    </template>
</slott>


子组件往外传递数据:

  <slot
      v-for="item of list"
      :item=item>
  </slot>

//data中:
return{
      list:[1,2,3,4]
    }

   
 父组件也可以改为li:

<slott>
    <template  slot-scope="props">
    <li>{{props.item}}</li>
    </template>
</slott>


 这样的话,就实现了由父组件决定实现的内容

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

奔三路小程序已改版