首页 > 其他分享> 文章详细

Vue插槽

2021-06-29 14:35:01 阅读：213 来源： 互联网

标签：Vue name default 插槽 components Comp 组件

1. 介绍

插槽，简单的理解是我们在组件复用中子组件的一个占位符，用slot表示。它可以用来接收父组件传到子组件的内容，并显示在slot这里。

2. 作用

插槽的存在可以让用户去扩展组件，更好地复用组件和更加灵活地定制化处理。

3. 插槽的分类

匿名插槽
默认具名插槽
具名插槽（添加name属性）
作用域插槽（带数据）

4. 插槽的具体使用

匿名插槽

子组件

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件

<template>
  <div id="app">
    <comp>匿名插槽</comp>
  </div>
</template>
<script>
import Comp from '@/components/Comp'
export default {
  name: 'App',
  components: {
    Comp
  }
}
</script>

默认具名插槽

子组件

<template>
  <div>
     <slot></slot>
  </div>
</template>

父组件

<template>
  <div id="app">
    <comp>
    	<template v-slot:default>
          默认具名插槽
      	</template>
    </comp>
  </div>
</template>
<script>
import Comp from '@/components/Comp'
export default {
  name: 'App',
  components: {
    Comp
  }
}
</script>

注：默认具名插槽，子组件的定义和匿名插槽是一样的。但是在父组件引用时需要使用template去引用，并且通过v-slot去指明默认的插槽名称default。其中v-slot:default也可以写成#default

具名插槽

子组件

<template>
  <div>
     <slot name="myslot"></slot>
  </div>
</template>

父组件

<template>
  <div id="app">
    <comp>
        <!-- 写法1 -->
        <template #myslot>
          具名插槽
      	</template>
  		<!-- 写法2 -->
    	<template v-slot:myslot>
          具名插槽
      	</template>
    </comp>
  </div>
</template>
<script>
import Comp from '@/components/Comp'
export default {
  name: 'App',
  components: {
    Comp
  }
}
</script>

注：同一个插槽不能在组件里渲染多次的问题，这里是为了向大家展示具名插槽的多种用法。下面介绍插槽传值也是一样。

作用域插槽

子组件

<template>
  <div>
    <slot name="mySlot" :user="user"></slot>
  </div>
</template>
<script>
export default {
  data(){
    return{
      user:{
        name:"李四",
        age:14
      }
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <comp>
        <!-- 写法1 -->
      	<template #mySlot="slot">
         	<div>作用域插槽:来自插槽的数据:{{slot.user.name}}:{{slot.user.age}}</div>
      	</template>

		<!-- 写法2 -->
    	<template v-slot:mySlot="prop">
         	<div>作用域插槽:来自插槽的数据:{{prop.user.name}}:{{prop.user.age}}</div>
      	</template>

		<!-- 写法3 解构写法 -->
		<template v-slot:mySlot="{user}">
         	<div>作用域插槽:来自插槽的数据:{{user.name}}:{{user.age}}</div>
      	</template>
    </comp>
  </div>
</template>
<script>
import Comp from '@/components/Comp'
export default {
  name: 'App',
  components: {
    Comp
  }
}
</script>

标签：Vue,name,default,插槽,components,Comp,组件
来源： https://www.cnblogs.com/scorpiozone/p/14949824.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9