Vue3中的插槽怎么使用


本篇内容主要讲解“Vue3中的插槽怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3中的插槽怎么使用”吧! 简单来说就是子组件中的提供给父组件使用的一个坑位,用 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中就会被替换成这些内容。比如一个最简单插槽例子12子组件中的 便是父组件放在子组件标签之间的内容。当然这之间你可以传入任何代码片段,都会被放到这个位置。同样的你也可以在标签之间放入变量,比如先解释一下后面频繁出现的两个词 插槽插槽内容,防止后面阅读搞混了:同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域,而插槽内容是无法访问子组件的数据(即父组件中两个之间是不能使用子组件中的数据的),这就是所谓的渲染作用域。后面会介绍插槽插槽内容传参的方式在父组件没有提供任何插槽内容的时候,我们是可以为子组件的插槽指定默认内容的,比如此时父组件1展示默认内容父组件2展示提供的内容很多时候一个 插槽满足不了我们的需求,我们需要多个 插槽。于是就有了具名插槽,就是具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑,让它们呆在该呆的位置去。比如带 name 的插槽 被称为具名插槽。没有提供 name 会隐式地命名为“default”。在父组件中可以使用v-slot:xxx(可简写为#xxx) 指令的 元素将目标插槽的名字传下去匹配对应 插槽。比如所以父组件中无需在意顺序,只需要写好模板命好名,它就会自动去到它所对应的位置。动态插槽名就是插槽名变成了变量的形式,我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。上面说过插槽内容是无法访问子组件的数据的,但是如果我们想在插槽内容访问子组件的状态该怎么办呢?其实插槽可以像对组件传递 props 那样,在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式你还可以以结构的形式获取slot提供的数据注意不能绑定name属性,因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传免费云主机域名递给插槽内容。因为传递的参数只能在插槽内容中使用,所以这类能够接受参数的插槽就被称为了作用域插槽。下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的,所以可以缩写成这样到此,相信大家对“Vue3中的插槽怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是百云主机网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: Java数据结构之二叉搜索树实例分析

这篇文章主要介绍“Java数据结构之二叉搜索树实例分析”,在日常操作中,相信很多人在Java数据结构之二叉搜索树实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java数据结构之二叉搜索树实例分析”的疑惑有所帮助!接下来,…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/30 11:49
下一篇 03/30 11:50

相关推荐