Slot的使用

最新推荐文章于 2023-12-30 22:55:31 发布

xiaoxiao无脸男

最新推荐文章于 2023-12-30 22:55:31 发布

阅读量628

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/100603567

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

Slot的使用

Slot有具名插槽和无名插槽。主要作用是占位子，达到在子组件中显示父组件自定义的内容。

无名插槽的使用：

定义子组件

<div>

<p>我是子组件</p>

<slot>我是子组件自定义的内容</slot>

</div>

</template>

export default{

name:'child'

}

</script>

<style>

</style>

在父组件中引入子组件，父组件：

<div>

</div>

</template>

import Child from './Child'

export default {

name:'Parent',

components:{

Child

}

</script>

<style>

</style>

效果图如下：

修改父组件如下：

<div>

<child>我是父组件自定义的内容</child>

</div>

</template>

import Child from './Child'

export default {

name:'Parent',

components:{

Child

}

</script>

<style>

</style>

则效果图为：

我是父组件自定义的内容替换了子组件中的slot里面的我是子组件自定义的内容。
2.具名插槽的使用：

定义子组件

<div>

<p>我是子组件</p>

<p>我是子组件头部</p>

</slot>

<p>我是子组件身体</p>

</slot>

<p>我是子组件尾部</p>

</slot>

<slot>

<p>我是子组件无名插槽</p>

</slot>

</div>

</template>

export default {

name: "child"

};

</script>

<style>

</style>

定义父组件：

<div>

</div>

</template>

import Child from './Child'

export default {

name:'Parent',

components:{

Child

}

</script>

<style>

</style>

效果图：

修改父组件：

<div>

<child>

<p slot="header">我是父组件头部</p>

<p slot="body">我是父组件身体</p>

<p slot="footer">我是父组件尾部</p>

<p>我是父组件自定义的内容1</p>

<p>我是父组件自定义的内容2</p>

</child>

</div>

</template>

import Child from './Child'

export default {

name:'Parent',

components:{

Child

}

</script>

<style>

</style>

则效果图为：

在父组件的child标签里面，元素根据slot属性去匹配子组件中定义的slot标签的name属性。如果标签没有slot属性，那默认为slot=”default”,即匹配到无名插槽。

自2.6.0起，已废弃slot属性，使用v-slot指令，即最新具名插槽的使用如下：

定义子组件：

<div>

<p>我是子组件</p>

<p>我是子组件头部</p>

</slot>

<p>我是子组件身体</p>

</slot>

<p>我是子组件尾部</p>

</slot>

<slot>

<p>我是子组件无名插槽</p>

</slot>

</div>

</template>

export default {

name: "child"

};

</script>

<style>

</style>

定义父组件：

<div>

<child>

<p>我是父组件头部</p>

</template>

<p>我是父组件身体</p>

</template>

<p>我是父组件尾部</p>

</template>

<p>我是父组件自定义内容1</p>

<p>我是父组件自定义内容2</p>

</template>

</child>

</div>

</template>

import Child from './Child'

export default {

name:'Parent',

components:{

Child

}

</script>

<style>

</style>

效果图为

3.作用域插槽的使用：

作用域插槽即带有数据的插槽,作用域插槽只是提供数据，作用域插槽的显示样式由父组件来定义。

定义子组件：

<template>
    <div>
    <!--绑定多个数据，使用{}并用,分割即可-->
        <slot :data="{name,age}"></slot>
    </div>
</template>
<script>
export default {
    name: 'Child',
    data(){
        return {
            name:['小明','小红','小王'],
            age:[1,2,3]
        }
    }
}
</script>

定义父组件：

<template>
  <div>
    <h3>这里是父组件</h3>
    <!--第一次使用，使用列表展示名字-->
    <Child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data.name">{{item}}</li>
        </ul>
      </template>
    </Child>
    <!--第二次展示，展示数组名字-->
    <Child>
      <template slot-scope="user">
        <p>{{user.data.name}}</p>
        <p>{{user.data.age}}</p>
      </template>
    </Child>
    <!--第三次展示，不使用slot的data数据，作用域插槽退变为匿名插槽-->
    <Child>
        这是父组件的模板
    </Child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
    name: 'Parent',
    components:{
      Child
    }
}
</script>

效果图如图所示：