(十二)vue.js组件——组件高级用法(5)

1)递归组件

类似于js函数可以递归一样,组件也可以递归调用,即自己调用自己。

要实现组件递归,过程如下:

1.第一步:给组件本身加上一个name属性
2.第二步:当然为了递归时不会无限的执行下去,你必须加一个结束条
件来限制递归数量。
3.第三步:实现一次调用

在这里插入图片描述
注意:其实name可以和组件名不一样,但是name的值和递归调用时必须一样。然后他能用在一些级联选择器和树形控件上。

2)内联组件

前面我们已经讲了,在组件标签中给内容默认会被忽略,除非你在在子组件中写slot插槽,这样的话组件标签中的内容就会被渲染进行子组件里面。

在这里,我们就要说下,如果你在子组件标签中给了内容,只要在子组件标签上给定一个inline-template属性,这时即便你没有在子组件中给上slot插槽,数据仍然能够保留,】

保留形式:
会把你在父组件中写的子组件标签与子组件标签中的内容全部作为父组件的部分内容。
而且,在这个子组件标签里面,我们还可以直接获取子组件的数据!这无疑的让我们的父组件模板更加灵活了。
写在内联组件中的内容最外层应该有且仅有一个标签
在这里插入图片描述
现在好像不能够在内联模板中使用父组件的数据了。

3)动态组件

前面写代码时,基本上是,组件挂载了就写死了,现在的话我们可以通过一个特殊的元素<component>在加上is属性,实现动态的挂载不同的组件。

任何组件都可以用component+is属性实现挂载

当然前提是,作为is值的组件名是is属性所在范围内访问到的。
在这里插入图片描述
通过动态的修改is属性的值,可实现动态挂载不同的组件
在这里插入图片描述

注意:
只要是当前component标签所在访问得到。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值