vue插槽的使用

 我来答
世纪网络17
2022-07-14 · TA获得超过5975个赞
知道小有建树答主
回答量:2426
采纳率:100%
帮助的人:146万
展开全部

在我们开发项目的时候,我们往往会封装一些公用的组件,但是组件在应用的过程中,往往不能满足我们的需求,这个时候,我们就需要用到插槽

vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢? 我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。 注意:以下的所有内容是基于vue版本 2.6.0 起

首先写一个父组件

然后是子组件

在这里关键点是父组件里面调用子组件,然后看看是否显示 测试内容显示

执行结果

3.1默认插槽
在我们引入一个button的时候,你希望btn里面的值,可以修改,可以控制,这个时候
button 组件 需要有<slot>标签,里面默认的文字就是button的内容

当你想要调用这个组件修改里面的值的时候,你只要传对应的值就即可

3.2具名插槽
如果我们在子组件特定的位置显示一些不一样的内容,这个时候,就用到了具名插槽,我们可以给插槽绑定name的值

当然也可以简写 v-slot用#代替

3.3作用域插槽
在我们父组件需要调用子组件的时候,然后呢,子组件的值需要替换,就需要用到作用域插槽

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式