vue3中插槽的使用

2024-08-24

VUE3 之插槽的使用 - 这个系列的教程通俗易懂，适合新手

1. 概述非理性定律告诉我们: 人们总是习惯于以情感去判断眼前的事物,非理性的去做决定. 对于长远的利益,人们更愿意去选择短期的利益. 因此在做决定前要让自己冷静,理性的分析,让自己看的更远. 言归正传,今天我们来聊一个新的概念 -- 插槽. 2. 插槽的使用 2.1 一个简单的例子我们先来看一个简单的例子 <body> <div id="myDiv"></div> </body> <script> const app =

Vue3中插槽(slot)用法汇总

Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中<slot></slot>就会被替换成这些内容.比如一个最简单插槽例子 //父组件 <template> <div> <Child&g

vue3中defineComponent 的作用

vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeScript 而存在的. 我都知道普通的组件就是一个普通的对象,既然是一个普通的对象,那自然就不会获得自动的提示, import { defineComponent } from 'vue' const component = { name: 'Home', props:{ data: String,

vue3中$attrs的变化与inheritAttrs的使用

在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$listeners是单独存在的. 在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性. 在vue2中的$attrs 在Vue 2中,attrs里面包含着上层组件传递的所有数据(除style和class) 当一个组件声明了prop时候,a

Vue中插槽指令

08.29自我总结 Vue中插槽指令意义就是在组件里留着差值方便后续组件内容新增而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量示例 <div id="app"> <msg-tag> //4.创建个组件 <template v-slot:插槽的名称> //根据插槽的名称创建插槽 //插槽里面的内容 </template> </msg-tag> </div> <sc

vue3中使用axios如何去请求数据

在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种直接在setup中去获取数据 setup(props) { const data = reactive({ note: [], }); getArticalLatest().then((res) => { data.note = res.data.data; }); return { ...toRefs(data), }; }, 在onMouted里面请求数据 setup(props) { con

vue3中watch函数

watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newValue, oldValue) => { //直接监听 console.log("count改变了"); }); 监听响应式对象 let book = reactive({ name: "js编程", price: 50, }); const changeBook

端午总结Vue3中computed和watch的使用

1使用计算属性 computed 实现按钮是否禁用我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.false表示可以使用. 由于disabled的值是动态变化的. 此时我们就可以使用计算属性computed 这个方法. 只要值发生变化他就会重新去计算. 在vue3中,如果需要使用computed需要引入. <template> <div> <div> <div>

vue 3 学习笔记 (七)——vue3 中 computed 新用法

vue3 中的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法. 组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue".引入之后 computed 可以传入的参数有两种:回调函数和 options .具体看看它是如何使用

在vue3中使用router-link-active遇到的坑

在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由路径,其中后者无法和前者一样设置类名,也就是 router-link-active 加不上在vue2中可以实现,因为 router-link-active 本就不是精确匹配,只要路由路径包含router-link组件的to属性值,就可以在链接激活时设置CSS类名但是在vue3中,无法实现在查看

Vue3中的响应式对象Reactive源码分析

Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数及 ReactiveEffect类在Ref随笔中已经介绍,在本文中不做赘述本文中所有的源代码均为 JS简易版本,便于阅读理解 Vue3源码分析之 Ref 与 ReactiveEffect Reactive流程图 reactive(obj) 都做了些什么? reactive函数其实只做了过滤只读对象的功能,创建 Proxy 代理是通过调用 createReactiveOb

Module Federation 模块联邦在Vue3中使用Vue2搭建的微服务

前言: 备注:本文基于对webpack Module Federation有一定了解的情况下一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目中去使用Vue2的组件呢,其实是因为历史原因.好几个老的核心的项目都是使用Vue2来写的,在中期以及空闲的时候团队是有机会使用Vue3去重构,但是并没有这样做,到了现在这个阶段已经太晚了,项目变得庞大,人员也减少了. 最近在维护一个项目,被折磨得不行,比如一个.vue文件有3千行代码,框架设计不合理

vue3中使用computed

演示示例(vant组件库的轮播图): <van-swipe :loop="false" :width="150" class="my-Swiper" :show-indicators="false"> <van-swipe-item v-for="item in state.musicList" :key="item.id"> <img :src="

vue3中的四种插槽的介绍-保证让你看看的明明白白！

插槽当组件中只有一个插槽的时候,我们可以不设置 slot 的 name 属性. v-slot 后可以不带参数,但是 v-slot 在没有设置 name 属性的时候, 插槽口会默认为"default". 插槽主要是在封装组件的时候去使用注意点:v-slot 只能添加在 <template>上哈. 第一种插槽(匿名插槽) 现在我们封装一个组件,在组件中可以自定义内容. 这个时候我们就可以使用插槽了. 插槽可以将父页面中的内容展示在子组件中指定的位置. 父页面 <tem

Vue中插槽slot的使用

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类. 非插槽模板指的是html模板,比如‘div.span.ul.table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制: 插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模

vue中插槽作用域的使用

一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签在template标签上加一个属性scope 值随意书写在组件内部用slot进行接受,如果给slot加一个自定义属性,那么在组件标签的template的scope上面就可以进行接受到. 3.例父组件 App.vue 中 <template> <div id="app"> <header-com> <template scope=&q

vue中插槽（slot）的使用

刚学vue的时候,曾经学习过slot插槽的使用,但是后面接触的不多,因为之前我还没使用element-ui... 但是使用了element-ui之后,里面的许多组件,有时候会使用插槽,为了巩固一下插槽,写一个笔记首先,插槽有什么作用呢? 我们先来自定义一个组件: <template> <div> {{text}} </div> </template> <script> export default { data(){ return { text

vue3中的通过proxy实现双向数据绑定的原理

1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象. 如果对vue2.xx了解或看过源码的人都知道,vue2.xx中使用 Object.defineProperty()方法对该对象通过递归+遍历的方式来实现对数据的监控的,具体了解 Object.defineProperty可以看我上一篇文

认真总结Vue3中ref与reactive区别和isRef与isReactive 类型判断

1.什么是ref? 1.ref和reactive-样也是用来实现响应式数据的方法由于reactive必须传递一个对象, 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦所以Vue3就给我们提供了ref方法,实现对简单值的监听 2.ref本质: ref底层的本质其实还是reactive 系统会自动根据我们给ref传入的值将它转换成 ref(xx) -> reactive({value:xx}) 3.ref注意点: 在Vue的html中使用ref的值不用通过value获取

熬夜总结vue3中setUp函数的2个参数详解

1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接收. 包含配置声明并传入的所有的属性的对象也就是说:如果你想通过props的方式输出父组件传递给子组件的值. 你需要使用props进行接收配置.即props:{......} 如果你未通过Props进行接受配置,则输出的值是undefined <template> <div class=&

vue3中插槽的使用

热门专题