vue 自定义组件之父子组件

vue 自定义组件之父子组件,第1张

    html标签中使用的组件在使用插槽后互相之间可以嵌套,被嵌套的称为嵌套的子组件,嵌套的叫父组件,所有的组件都有一个根组件即vue实例管理的容器。

    使用 $parent 获取父组件的实例。

可以在控制台看到父组件的vue实例

    当组件嵌套比较深,而又需要最外层组件的数据时,可以通过 $parent.$parent...... $parent 一层一层父类往上至根目录,

或者使用  $root 直接获取根组件

    使用 $children 获取所有子组件实例。

可在控制台看见根据组件在页面中的顺序返回的所有子组件组成的数组

要使用子组件的值时可使用此方法,用下标选择需要的子组件。

因为使用 $children 获取的数组里顺序是按是在页面中使用的顺序来排序的,当有的业务不确定使用顺序,并且还要使用子组件的值的时候,就需要按 ref 标识来获取子组件。

在使用子自定义组件时,给组件标签添加一个 ref 属性,然后就可以通过 $refs 返回拥有ref属性的组件:

在控制台可以看见获取到的子组件数组:

    因为返回的是对象,所以可以通过ref值来 *** 作子组件的值。

父beforeCreated ->父created->父beforeMounted->子beforeCreated -> 子created-> 子beforeMounted-> 子mounted->父mounted->父beforeUpdata->子beforeUpdata-> 子updata->父updata->父beforeDestroyed->子beforeDestroyed-> 子destroyed->父destroyed

希望父组件加载完成在加载子组件:

在子组件上添加 v-if=‘isShow’ isShow默认值是false,在父组件的mounted中将isShow变成true ,执行顺序变成如下:

父beforeCreated ->父created->父beforeMounted->父mounted->父beforeUpdata->子beforeCreated -> 子created-> 子beforeMounted-> 子mounted-> 子beforeUpdata-> 子updata->父updata->父beforeDestroyed->子beforeDestroyed-> 子destroyed->父destroyed

***在mounted中才可以触发updated,


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11525007.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存