首页 > 其他分享 >Vue3中slot插槽使用方式

Vue3中slot插槽使用方式

时间:2023-04-25 17:57:50浏览次数:32  
标签:slot 作用域 插槽 无法访问 Vue3 组件

********************************** Vue3中slot插槽使用方式****************************************************
参考:https://huaweicloud.csdn.net/638eab83dacf622b8df8d08c.html
<template v-slot:isFang>

</template>
简写 v-slot:isFang #isFang
<template #isFang>

</template>

需要注意的是v-slot该指令需要作用在 template 元素上

<slot name="footer"></slot>
<slot></slot>--》我们没有添加 name 属性,这个时候 Vue 会隐式的将这个插槽命名为“default”,

具名插槽顾名思义就是给插槽起一个名字,匿名则反

父组件中的插槽内容是无法访问到子组件中的数据的,但是,万一我们有需求就是需要在插槽内容中获取子组件数据怎么办呢?就要用到作用域插槽了
作用域插槽:我们希望组件中 插槽位置 可以访问到子组件中的内容。默认情况下,是无法访问的。作用域顾名思义你可以访问它,它不可以访问你,作用域插槽就是解决这个的。
需要注意的是,子组件传递过来的数据只能在子组件这个标签内使用。
父组件:
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<child v-slot="{ text, count }">
<div>{{ text }}---{{ count }}</div>
</child>
</template>
子组件:
<template>
<div class="child-box">
<p>我是子组件</p>
<slot text="我是子组件小猪课堂" :count="1"></slot>
</div>
</template>

标签:slot,作用域,插槽,无法访问,Vue3,组件
From: https://www.cnblogs.com/myfirstboke/p/17353386.html

相关文章

  • Vue3---error xx should be on a new line
    ESLint:':render-header'shouldbeonanewline.(vue/max-attributes-per-line)此问题是由于.eslintrc.js文件中的vue/max-attributes-per-line配置错误产生的"vue/max-attributes-per-line":['error',{"singleline":10,......
  • vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目
    最后是完整的vite.config.ts、main.ts配置1、先用vite创建一个项目npmcreatevite@latest2、安装elementplusyarnaddelement-plus@element-plus/icons-vuevite.config.ts配置组件按需导入,图标自动导入npminstall-Dunplugin-vue-componentsunplugin-auto-impor......
  • vue3 拖拽操作学习
    AS-Editor组件git:https://gitee.com/was666/as-editor/tree/vue3.x/体验:http://was666.gitee.io/as-editor/#/home......
  • vue3中如何引入element-icon并使用
    简单来说,步骤就是:安装——注册——按需引入——使用安装#NPM$npminstall@element-plus/icons-vue#Yarn$yarnadd@element-plus/icons-vue#pnpm$pnpminstall@element-plus/icons-vue注册您需要从@element-plus/icons-vue中导入所有图标并进行全局注册。......
  • vue3-sign 手写签名组件
    一个简易签名组件,基于vue3和canvas。#安装npmi@sangtian152/vue3-sign-S#oryarnadd@sangtian152/vue3-sign引入在main.js中写入以下内容:import{createApp}from'vue'importvue3Signfrom'@sangtian152/vue3-sign';import"@sangtian152/vue3-s......
  • vue3+jointjs 使用模板添加元素
    关于如何在Vue3和JointJS中使用拖拽模板来创建节点元素,可以按照以下步骤进行:1.安装JointJS使用npm进行安装:```npminstalljointjs```2.在Vue3中创建JointJS容器在Vue3中创建一个组件,用于创建JointJS的画布和节点。在组件的生命周期方法`mounted`......
  • vue3+jointjs demo
    下面是使用Vue3和JointJS添加元素的示例代码:1.安装JointJS```terminalnpminstalljointjs--save```2.创建JointJS图形```javascriptimport{ref,onMounted}from'vue';import*asjointfrom'jointjs';exportdefault{setup(){constgraphC......
  • Vue3 Vue3中其他的改变
    视频六、其他1.全局API的转移Vue2.x有许多全局API和配置。例如:注册全局组件、注册全局指令等。//注册全局组件Vue.component('MyButton',{data:()=>({count:0}),template:'<button@click="count++">Clicked{{count}}times.</button>......
  • ai问答:使用 Vue3 组合式API 和 TS 配置 axios 拦截器 http错误状态
    通过axios.create()可以创建一个axios实例axiosInstance,参数如下:baseURL:请求前缀timeout:超时时间headers:请求头默认配置:import{defineComponent}from'vue'importaxiosfrom'axios'exportdefaultdefineComponent({setup(){//实例-默认配置......
  • vue3 自定义组件双向绑定(modelValue)
    参考链接:https://huaweicloud.csdn.net/638edf68dacf622b8df8d152.html父组件:<Customabcref="editor"v-model="data.introduction":min-height="400"name="职能"placeholder="请编辑"/>子组件<divclass="tinymc......