首页 > 编程知识 正文

vue插槽传值,vue组件获取插槽的实例

时间:2023-05-04 23:22:11 阅读:108964 作者:3128

有三种类型的插槽

1、默认插槽

2、命名插槽

3、作用域插槽

一 默认插槽

div id='app' child-component你好/child-component/divscriptvue.com ponent (child-component ),{ template 3360 }

二 具名插槽

命名插槽是将slot=‘“自定义名称”的属性添加到父组件中,然后将name=‘“自定义名称”添加到子组件中。 如果未将slot属性添加到父组件的一部分中,则此处为缺省插槽。 对于子组件,则直接是正在使用的父组件的默认插槽部分。

div id='app' div class='father' h3这里是父组件/h3 child span slot='demo1'菜单1/span span菜单2/span slot=' demo 1 span divtemplateid=' child ' divclass=' child ' H3此处为子组件/H3 slot/slotslotname=' demo3' slot/div/templatescrive /脚本

三 作用域插槽

父程序集模板中的所有内容都将在父范围内进行编译。 子部件模板中的所有内容都在子级范围内进行编译。

但是,可以在父组件中使用slot-scope属性从子组件中检索数据。

假定您必须先在子程序集中使用:data=data传递data数据。

div id='app' div class='father' h3这里是父组件/H3 childdivslot-scope=' user ' { user.data }/div/child/div n''H3此处为子组件/H3n ' ' slot 3360 data=' data '/slotn '/div ',DATA:function((return ) data: ),表示/脚本

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