Vue 3:组合 API,如何从组件实例调用方法?
P粉464208937
P粉464208937 2024-03-25 18:57:51
0
1
480

在 Vue 2 中我确实喜欢这样:

import Component from '@/components/Component.vue';

    const VueComponent = {
      install(Vue, settings = {}) {
        const Constructor = Vue.extend(Component);
        const ComponentContainer = new Constructor();
    
        ComponentContainer._props = Object.assign(ComponentContainer._props, settings);
        const vm = ComponentContainer.$mount();
        document.querySelector('body').appendChild(vm.$el);
       }
    }

然后我可以像这样调用任何组件方法:

ComponentContainer.add();

我正在尝试使用 Vue 3、TS 和 Composition API 来制作我的组件,所以我这样做:

import { App, createApp, Component } from 'vue';
import ComponentName from './components/ComponentName.vue';

const VueComponentName: Component = {
  install(Vue: App, settings = {}) {
    const ComponentContainer = createApp(ComponentName);
    ComponentContainer._component.props = Object.assign(ComponentContainer._component.props, settings);

    const wrapper = document.createElement('div');
    const vm = ComponentContainer.mount(wrapper);
    document.body.appendChild(vm.$el);
  },
};

在组件中我创建方法 add:

export default defineComponent({
  name: 'ComponentName',
  setup(props, {}) {
    const add = (status) => {
      console.log('test')
    };

    return { add };
  },
});
</script>

现在我想使用插件中的组件方法:

ComponentContainer.add();

但是做不到,组件实例没有这个方法...我做错了什么?

P粉464208937
P粉464208937

全部回复(1)
P粉613735289

在 Vue 3 中,在 setup 方法中声明的所有内容都是组件私有的。如果您希望外部组件/js 代码访问其某些属性,则必须使用 defineExpose 可组合。

export default {
  setup() {
    function add() {...}

    defineExpose({ add })

    return { add }
  }
}

使用选项api时也存在:expose

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板