关于Vue插槽slot的使用

vue官方文档中关于slot插槽的说明很简短,语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了vue的说明文档。

一、slot的作用

Q: 假如父组件需要在子组件内放一些DOM元素,那么这些DOM是显示呢还是不显示呢?

默认情况下是不会显示的,如下图所示,页面并没有显示父组件增加的<span>我是魔鬼</span> 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢?这就用到了slot插槽,使用slot这个标签可以将父组件放在子组件的内容,放到它想显示的地方

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面这行不会显示-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>我是子组件</h1>"  
       }  
     }  
  });  
</script>

企业微信截图_16008439842601.png

二、简单理解slot

通俗易懂的讲,slot具有“占坑”的作用,在子组件占好了位置,那父组件使用该子组件标签时,新添加的DOM元素就会自动填到这个坑里面

三、单个slot

我们将上面的代码改一改 , 给child组件添加slot插槽,那么父组件的添加的DOM元素就填充到这个slot插槽里面了

注意:如果有多个DOM元素,会一起插入到<slot></slot>这个标签内

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面这行会显示在 “我是子组件” 数据后面-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>我是子组件</h1><slot></slot>"  
       }  
     }  
  });  
</script>

企业微信截图_16008440122291.png

四、具名插槽

现在我们需要将父组件添加的HTML标签放在子组件里的不同位置。具名插槽实现:先在子组件对应分发slot标签里,添加name=”name名” 属性,其次父组件在要分发的标签里添加 slot=”name名” 属性,然后就会将对应的标签放在对应的位置了。

简单理解就是:给子组件占的每一个坑取名,将父组件添加的HTML元素添加到指定名字的坑,就实现了分发内容在不同位置显示

【Child组件模板】
<template>
  <div>
    <slot name="header"></slot>
    <h1>我是子组件</h1>
    <slot name="footer"></slot>
  </div>
</template>
【父组件引用Child组件】
<Child>
  <span slot="header">我是header</span>
  <span slot="footer">我是footer</span>
</Child>

企业微信截图_16008440582557.png

五、编辑作用域

父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译

【Child组件模板】
<template>
  <div>
    <slot name="header"></slot>
    <h1>{{msg}}</h1>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是子组件里面的内容'
    }
  }
}
</script>
【父组件引用Child组件】
<template>
  <Child>
    <span slot="header">我是header</span>
    <h1>{{msg}}</h1>
    <span slot="footer">我是footer</span>
  </Child>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是父组件的内容'
    }
  }
}
</script>

企业微信截图_16008439256367.png

六、解构slot-scope

在子组件中插槽中通过:data绑定了数据,父组件可以通过slot-scope="name"来取得子组件作用域插槽:data绑定的数据,name的名称可以随便取,用来定义对象来代替取到的data数据。

【Child组件模板】
<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: ['Neinei','Laoba','Demi','Feiyan']
    }
  }
}
</script>
【父组件引用Child组件】
  <template>
    <!-- 循环数据列表 -->
    <Child>
      <div slot-scope="msg">
        <span v-for="item in msg.data">{{item}} </span>
      </div>
    </Child>
 
    <!-- 直接显示数据 -->
    <Child>
      <div slot-scope="msg">
        <span>{{msg.data}} </span>
      </div>
    </Child>
 
    <!-- 不使用其提供的数据, 作用域插槽退变成匿名插槽 -->
    <Child>
      <div>我是插槽</div>
    </Child>
  </template>

企业微信截图_16008439152928.png

原文地址:https://blog.csdn.net/qq_38128179/article/details/85273522

更多相关技术文章,请访问HTML中文网

以上就是关于Vue插槽slot的使用的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏