关键词搜索

全站搜索×
密码登录在这里
×
注册会员

已有账号? 请点击

使用其他方式登录

Vue 插槽slot匿名插槽/具名插槽/作用域插槽区别

发布2022-06-16浏览532次

详情内容

Vue插槽常用的有几种、插槽的作用、分别如何使用、使用场景 插槽分为匿名插槽/具名插槽/作用域插槽,  插槽的作用是我们可以给组件预留空间自己定义内容。

匿名插槽:不写name属性时的使用方法就叫匿名插槽,其时所谓的匿名插槽是有名字的 他的名字是default 

具名插槽: 可以通过v-slot:插槽的名字 , 给指定的插槽定义内容 ,v-slot:名字可以简写为 #名字 

作用域插槽: 插槽也可以通过自定义属性预备插槽需要使用的数据 而这种插槽就叫做作用域插槽, 使用场景比如在我写后台管理系统的时候,用到了表格,表格有操作列, 里面需要使用插槽自定义列写按钮,还有我们的组件中在子组件定义一个具名插槽, 在父组件就可以传入不同的数据,利用name属性,显示不同的内容

子组件

<template>
  <div id="com">
    <div>

      <!-- // 默认插槽 可以省略name default-->
      <slot></slot>

      <!-- //具名插槽 要指定name属性-->
      <slot name="h"></slot>

      <!-- // 作用域插槽  要指定name和自定义属性,自定义属性绑定数据-->
      <slot name="z" :say1="say1" :say2="say2"></slot>

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

<script>
export default {
  data() {
    return {
      say1: "一点寒芒先到,随后枪出入龙",
      say2: "good good study",
    };
  },
  methods: {},

  computed: {},
  components: {},
};
</script>


<style lang="scss" scoped >
</style>


父组件

<template>
  <div id="combox">
    <com>

      <!-- 默认插槽/我其实也有名字是#default -->
      <template>
        <div>
          我是盖伦-----默认插槽/我其实也有名字是#default,只是默认插槽可以在template不写名字
        </div>
      </template>

      <!-- 具名插槽 在template v-solt:xx名字 -->
      <template v-slot:h>
        <div>
          我是皇朝
        </div>
      </template>

      <!-- 具名插槽 v-slot:h 简写#h -->
      <template #z>
        <div>
          我是赵云
        </div>
      </template>

      <!-- 作用域 插槽可以写数据 -->
      <!-- 结构子组件数据出来 say1, say2-->
      <template #z="{say1, say2}">
        <div>{{say1}}</div>
        <div>{{say2}}</div>
      </template>

    </com>
  </div>
</template>

<script>
//引入子组件 子组件写<slot></slot>父组件写template 
import com from "@/components/com";
export default {
  data() {
    return {
     
    };
  },
  methods: {},

  computed: {},
  components: {
    com,
  },
  created() {},
};
</script>


<style lang="scss" scoped >
</style>
点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
  • 支付宝付款
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载