首页 > 编程知识 正文

slot-scope=scope什么意思,vue中props的用法

时间:2023-05-06 19:07:56 阅读:108968 作者:1584

个人理解:

通过组件的扩展,可以通过slot插槽将内容传递到组件内部的指定位置,并通过slot亲子参与

开发背景(slot出现时为了解决什么问题):

通常,Childspan style=”color:red; “hello world/span/Child的组件标签Child中的span标签将替换为组件模板template的内容。 需要一个slot插槽才能将组件标签Child中的内容传递给组件。

Slot的通俗理解

是“坑”,在组件模板中定位。 使用此部件标签时,部件标签中的内容将自动填充基坑。 也就是说,如果坑slot name=”mySlot "已命名,则部件标签中属性slot=”mySlot "的元素将替换该位置的内容。

Slot使用

1、组件中有单个或多个未命名slot标签时

Childspan style=”color:red; “hello world/span/Child”

template

div

插槽/插槽

slot style=”color:blue; ’这是在slot上添加了样式/slot

slot name=”mySlot "这是带有命名slot的默认内容/slot

/div

/template

输出。 有两个红色的hello world和一个使用slot的默认内容

注意:向slot标记添加样式无效。 不能用没有slot属性的标记的内容替换命名的插槽。 显示slot的默认值。 命名的slot是对应的。

http://www.Sina.com/http://www.Sina.com /见下文。

Child

span slot=' header ' hello world/span

span slot='main'hello world/span

span slot=' footer ' hello world/span

span slot=' other ' { { other data } }/span

/Child

template

div

slot name=”header "这是带有命名快照的默认内容/slot

slot name=”main "这是具有命名slot的默认内容/slot

slot name=”footer "这是具有命名slot的默认内容/slot

slot name=”other "这是带有命名slot的默认内容/slot

/div

/template

2、组件中有多个命名的slot

使用时,子组件标签Child必须具有template scope=”scopeName "标签,以便从子组件样板中的childProp调用绑定的数据

范围插槽的典型用例是列表组件,它允许您在parent的父组件中定制和显示列表项。 可以使用slot定义将items中的所有列表项传递给父组件,如下所示: 这意味着数据相同,不同的场景页面可以有不同的显示方式。

ul

sot name=' item ' v-for=' iteminitems ' : text=' item.text ' : my name=' item.my name '

快照的默认内容

/slot

/ul

Child

templates lot=' item ' scope=' props '

li{{props.myname}}/li

/template

/Child

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。