vue父组件获取子组件数据对象

我想在父组件上获取排子组件数据对象

<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下拉选择类似的功能

clipboard.png
我之所以会这样做是要在父组件上获取子组件里的数据做页面换算,
因为之前没有考虑好就做了这样一个插件但是发现
给值的时候不灵活,所以就想改成和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>
阅读 7.1k
3 个回答

父组件 mounted 阶段,子组件处于什么状态不一定啊,可能都还没渲染呢,你这么做的出发点是什么,简单说说,可能存在其他更好地解决方案?


updated

哦,根据你对于问题的更新,按我的理解的话,你是想要在父组件内获取到子组件的 vm 对吧,比如父组件有一个 options 属性,其值为所有子组件的 option 属性形成的数组或者直接是子组件 vm 本身,对吗?

如果是的话,我可以告诉你 element-ui 是怎么实现的,原理很简单,就是通过 inject 将父组件注入到子组件中,然后通过这个父组件的引用属性来注册子组件,官方源码在这里.

关于父组件提供依赖的代码在这里, 子组件注入的逻辑在这里。关于 provider/inject 本身,可以去看看官方文档,或者看看我之前写过的文章,高级 Vue 组件模式

这种实现方式与你问题中描述的实现方式逻辑上是相反的,之所以这么做比较合理是因为,父组件无法预先知道子组件的渲染状态(就比如你这里遇到了 undefined 的情况),因此父组件关于子组件的描述是需要靠子组件来初始化的,因此将父组件作为依赖项注入子组件,再进行相关的初始化逻辑。

这种模式在实现存在父子多对一关系的组件时,有广泛的应用,比如 tabs、form 等等。

父组件渲染完成的时候,子组件什么都没有,你还能怎么获取

你需要在异步成功后才能拿到数据,dataList初始化就是arr或obj

推荐问题
宣传栏