uni-app 中 editor组件获取实例报错问题

8 阅读1分钟

editor组件获取实例代码不同的原因:

采用 uni.createSelectorQuery()返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,但初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点,就会导致在自定义组件中无法正确获取实例。需采用selectorQuery.in(component)将选择器的选取范围更改为自定义组件 component 内,返回一个 SelectorQuery 对象实例。

具体获取实例代码如下:

// editor组件 放置在页面中采用下列代码获取实例
import { ref } from 'vue';
const editorCtx = ref<any>(null)

// 需要在 editor组件 @ready后执行下列代码
uni.createSelectorQuery()
    .select('#editor')
    .context((res) => {
        //@ts-ignore
        editorCtx.value = res.context
    })
.exec()
// editor组件 放置在自定义组件中采用下列代码获取实例
import { ref, getCurrentInstance } from 'vue';
const instance = getCurrentInstance(); // 需放置在引入内容下方(setup 中)
const editorCtx = ref<any>(null)

// 需要在 editor组件 @ready后执行下列代码
// @ts-ignore
const scope = instance?.proxy
if (!scope) return
uni.createSelectorQuery()
    .in(scope)
    .select('#editor')
    .context(res => {
        // @ts-ignore
        editorCtx.value = res.context
    })
.exec()