我想在父组件上获取排子组件数据对象
<ct-select
v-model="text"
@getSearchName="getName">
<ct-option
v-for="(item, index) of dataList"
:key="index"
:value="item.value"
:label="item.label">
</ct-option>
</ct-select>
在父组件ct-select
里的mounted
下用this.$slots.default
获取为undefined
,因为dataList
是异步获取到的
//ct-select
export default {
mounted() {
console.log(this.$slots.default) //undefined
}
}
有什么办法可以在异步的情况下在mounted
里能获取到子组件上的数据对象??
补充问题
其实我想做和elementUi下拉选择类似的功能
我之所以会这样做是要在父组件上获取子组件里的数据做页面换算,
因为之前没有考虑好就做了这样一个插件但是发现
给值的时候不灵活,所以就想改成和elementui
一样的功能
但是看了elementui
的源码 但是看的有些懵
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
父组件 mounted 阶段,子组件处于什么状态不一定啊,可能都还没渲染呢,你这么做的出发点是什么,简单说说,可能存在其他更好地解决方案?
updated
哦,根据你对于问题的更新,按我的理解的话,你是想要在父组件内获取到子组件的 vm 对吧,比如父组件有一个 options 属性,其值为所有子组件的 option 属性形成的数组或者直接是子组件 vm 本身,对吗?
如果是的话,我可以告诉你 element-ui 是怎么实现的,原理很简单,就是通过 inject 将父组件注入到子组件中,然后通过这个父组件的引用属性来注册子组件,官方源码在这里.
关于父组件提供依赖的代码在这里, 子组件注入的逻辑在这里。关于 provider/inject 本身,可以去看看官方文档,或者看看我之前写过的文章,高级 Vue 组件模式。
这种实现方式与你问题中描述的实现方式逻辑上是相反的,之所以这么做比较合理是因为,父组件无法预先知道子组件的渲染状态(就比如你这里遇到了 undefined 的情况),因此父组件关于子组件的描述是需要靠子组件来初始化的,因此将父组件作为依赖项注入子组件,再进行相关的初始化逻辑。
这种模式在实现存在父子多对一关系的组件时,有广泛的应用,比如 tabs、form 等等。