首页 > 其他分享 >vue组件中的作用域插槽

vue组件中的作用域插槽

时间:2022-11-21 13:56:09浏览次数:49  
标签:slot vue title 作用域 插槽 使用 组件

插槽<slot>可以在父组件使用子组件时,改变子组件类容。

作用域插槽可以使得父组件页面可以使用子组件的数据:v-slot

v-slot具名插槽使用

<template v-slot:header>
    <h1>Here might be a page title</h1>
</template>
相当于
<template slot="header">
<h1>Here might be a page title</h1>
</template>

v-slot作用域插槽使用

<template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
</template>
当子组件为默认插槽时可以写为(当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用)
<template v-slot="slotProps">
    {{ slotProps.user.firstName }}
</template>

slot-scope:可以获取父组件传递给子组件的数据一般在<tempate>中使用

<el-table :data="btnTableData" style="width: 100%">
<el-table-column prop="menuUses" label="适用对象">
            <template slot-scope="scope">
              <span v-if="scope.row.menuUses">企业</span>
            </template>
 </el-table-column>
</el-table>

 

标签:slot,vue,title,作用域,插槽,使用,组件
From: https://www.cnblogs.com/Ma-YuHao/p/16911196.html

相关文章

  • 全局安装vue-cli 和项目创建
    npmiwebpack-g#安装webpacknpmivue-cli-g#安装脚手架vueinitwebpackdemo#创建项目全局安装vue-cli和项目创建npminstall-g@vue/cli#用npm安装脚......
  • vue学习
    #1安装vue-cli脚手架:sudonpminstall-gvue-cli#2查看可以使用哪个模板:vuelist#3vueinitwebpack(模板名称)sell(项目名称)#4安装过程:--Projectnamesell......
  • vue 3.0 常用api 的简介
    vue3.0生命周期写法一和vue2.x一致区别在于(beforeUnmount、unmount)名称不一样写法二在setup中使用,需要引用如:import{onBeforeMount}from‘vue’Setup(){......
  • 【Spring】——4、使用@Scope注解设置组件的作用域
    ......
  • 没必要阅读 Vue 源码吧?
    Vue的渐进式设计使得它非常容易上手,在最简单的情况下,我们只需要引入Vue的JS文件,然后newVue()即可使用声明式渲染。Vue的文档编写也比较优秀,方便使用者一步一步深入......
  • 超级详细的Vue安装与配置教程
    原文: https://www.jb51.net/article/251371.htm超级详细的Vue安装与配置教程 Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要......
  • 【Vue3】给整个网页背景document添加单击click事件
    给整个网页背景document添加单击click事件,解决下拉菜单隐藏问题onMounted(()=>{//document.addEventListener('click',function(){alert('body1')})documen......
  • swiper 8.0在vue中的使用
    页面效果: 1.安装swipernpminstallswiper2.引入组件import{Autoplay}from'swiper'3.使用组件modules:[Autoplay],4.轮播图代码<swiper......
  • vue2 条件渲染指令4 v-if v-else v-show
    v-if:每一次都会动态创建或移除删除元素,达到隐藏效果如果刚进入页面时,某些页面不需要被展示时使用<pv-if="vue">v-if</p>data:{vue:false} ......
  • vue2 双向绑定3 v-model 及专用修饰符 .number .trizy .lazy
    v-model:在不操控dom的时候,快速获取表单内的数据,双向绑定,更改input框的时候,data值也会随之改变    修饰符:.number将输入值转为number类型......