在 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粉6137352892024-03-26 15:31:35
在 Vue 3 中,在 setup
方法中宣告的所有內容都是元件私有的。如果您希望外部元件/js 程式碼存取其某些屬性,則必須使用 defineExpose
可組合。
export default { setup() { function add() {...} defineExpose({ add }) return { add } } }
使用選項api時也存在:expose