码迷,mamicode.com
首页 > 其他好文 > 详细

Slot使用

时间:2018-12-22 12:00:20      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:红色   component   imp   定义   种子   vue   v-for   ade   默认   


1、组件中有单个或多个未命名slot标签时,如下:
<Child><span style=”color:red;”>hello world</span></Child>   

 

<template>    

  <div>

<slot></slot>

<slot  style=”color:blue;” >这是在slot上添加了样式</slot>

<slot  name=”mySlot”>这是拥有命名的slot的默认内容</slot>

</div>

</template>

会输出:两个红色的hello world,以及一个使用slot的默认内容

 

注意:在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换,会显示slot的默认值(具名slot具有对应性);


2、组件中有多个命名的slot插槽时,可以实现父组件对子组件的指定位置显示内容或传参,如下:

<Child>

<span slot="header">hello world</span>

<span slot="main">hello world</span>

<span slot="footer">hello world</span>

<span slot="other">{{otherData}}</span>

</Child>

 

<template>

<div>

<slot  name=”header”>这是拥有命名的slot的默认内容</slot>

<slot  name=”main”>这是拥有命名的slot的默认内容</slot>

<slot  name=”footer”>这是拥有命名的slot的默认内容</slot>

<slot  name=”other”>这是拥有命名的slot的默认内容</slot>

</div>

</template>

 

3、作用域插槽:
使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签,再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;

作用域插槽代表性的用例是列表组件,允许在parent父组件上对列表项进行自定义显示,如下该items的所有列表项都可以通过slot定义后传递给父组件使用,也就是说数据是相同的,不同的场景页面可以有不同的展示方式:

   <ul>

      <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >

         slot的默认内容

      </slot>

   </ul>

 

   <Child>

      <template slot="item" scope="props">

        <li>{{props.myname}}</li>

      </template>

   </Child>

4、slot插槽使用注意:

slot可以包含任何模板代码,包括 HTML、字符文档、甚至组件

但是如果子组件内没有使用slot,任何传入它的内容都会被抛弃。

插槽显示顺序会和子组件中的命名顺序一致,父组件中需要显示的数据会根据name命名寻找对应的位置,

eg:

<template>
     <div id="app">
        <test-slot>
           <div slot="first">
               <span>1</span>
               <span>第一个</span>
            </div> 
            <div>
                <span>默认slot</span>
            </div>
            <div slot="second">
                <span>2</span>
                <span>第二个</span>
            </div> 
        </test-slot>
    </div> 
</template>

<script>
import testSlot from ‘./components/testSlot‘
export default {
data(){
return {

}
},
components:{
testSlot
}
}
</script>                                    

 

 

子组件testSlot.vue

 1 <template>
 2     <div class="testSlot">
 3         <div>
 4             <slot></slot><slot></slot> 
 5         </div>
 6         <div class="test-second">
 7             <slot name="second"></slot> 
 8         </div>
 9         <div class="test-first">
10             <slot name="first"></slot> 
11         </div>
12     </div> 
13 </template>
14 
15 <script>
16 export default { 
17 data(){
18 return {
19 
20 }
21 }
22 }
23 </script>

 

输出会是:

默认slot

默认slot

2 第二个

1 第一个

Slot使用

标签:红色   component   imp   定义   种子   vue   v-for   ade   默认   

原文地址:https://www.cnblogs.com/jswzy/p/10159633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!