vue插槽的理解和使用及作用域插槽

最新推荐文章于 2024-05-28 17:25:55 发布

weixin_流年

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量3.1k

点赞数 2

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_40967353/article/details/109508166

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

vue插槽的理解和使用及作用域插槽

对于插槽的概念和使用，这是vue的一个难点，以下是我总结出来的笔记，如有错误或者有不同见解的，欢迎留言，一起学习。

什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

代码如下：

1. 在子组件中放一个占位符

<template>
	<div>
      <h1>这周的天气可真的是:</h1>
	  <slot></slot>
	</div>
</template>

<script>
export default {
	data() {
		return {

		};
	}
};
</script>

2. 在父组件中给这个占位符填充内容：

<template>
	<div>
      <h1>使用slot分发内容:</h1>
	  <child>
		  <div>多云，最高气温30度，最低气温20度</div>
	  </child>
	</div>
</template>

3. 展示的效果

现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是什么样的：

1. 子组件代码无插槽：

2. 父组件照常填充内容：

3. 展示的效果：

总结：如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的

插槽的使用

插槽的最最简单使用，上面已有例子，这里就不写了，接下来看看，插槽其他使用场景

插槽的使用 - 具名插槽

描述：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

如下代码：

1. 子组件的代码，设置了两个插槽(header和footer)：

2. 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

3.展示的效果：

接下来再来看看，父组件中填充内容的时候，顺序调换下，看下能不能内容能不能对应上：

1. 子组件代码不变，父组件代码中填充顺序调换下(如图，在父组件中，footer 和 header 的填充位置对换)：

2. 展示的效果：

由此看出，即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中。即：父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的

插槽的使用 - 默认插槽

描述：默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把未指定插槽的填充的内容填充到默认插槽中。

示例代码如下：
1.子组件代码定义了一个默认插槽：

2.父组件给默认插槽填充内容：

3. 展现的内容

插槽的使用 - 作用域插槽

作用域插槽的概念和使用比较难于理解，通过查看多方资料，做了以下的总结：

描述：作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

基本语法：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>Document</title>
    <style>
        .current {
            color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <fruit-list :fruits="fruits">
            <template v-slot="slotProps">
                <!--slotProps是固定的名字 不能改变 接受子组件传递过来的数据-->
                <!--  slot-scope已经废弃 不建议使用 新增v-slot  -->
               <strong v-if="slotProps.info.id==2"  class="current">{{slotProps.info.name}}</strong>
               <span v-else>{{slotProps.info.name}}</span>
            </template>
        </fruit-list>
    </div>
    <script>
        Vue.component('fruit-list', {
            props: ['fruits'],
            template: `
            <ul>
            <li v-for="fruit in fruits" :key="fruit.id">
                <!--通过插槽储存fruit-->
            <slot :info='fruit'>{{fruit}}</slot>
            <!-- :info其实就是 v-bind:info-->
            </li>
            </ul>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                fruits: [{
                    id: 1,
                    name: 'apple'
                }, {
                    id: 2,
                    name: 'orange'
                }, {
                    id: 3,
                    name: 'banana'
                }]
            }
        })
    </script>
</body>

</html>

weixin_流年

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue插槽的理解和使用及作用域插槽

vue插槽的理解和使用及作用域插槽对于插槽的概念和使用，这是vue的一个难点，以下是我总结出来的笔记，如有错误或者有不同见解的，欢迎留言，一起学习。什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。代码如下：1. 在子组件中放一个占位符<template>
复制链接

扫一扫