option API 사용이 아닌 Composition API 에서 공통인 common.js 추가하고 싶을때 사용합니다.
Composition API 는 <script setup> 사용합니다.
option API 는 this.$common 사용하는 반면 Composition API 는 inject 를 사용합니다.
js/common.js
사용할 컴포넌트에서 inject 에서 사용할 이름을 지정해줍니다.
app.provide('common',common)
export default { install:(app) => { const common = { cc(str) { console.log('>>>>>common.js111 >>>>' + str); }, dd(str) { console.log('>>>>>common.js222 >>>>' + str); }, }; app.provide('common',common) } }
main.js
import { createApp } from 'vue' import './style.css' import App from './AppChart.vue' import store from './store' import common from '@/js/common' //import AfterLoginClass from './js/class/AfterLogin' import jQuery from 'jquery' import mitt from 'mitt' const emitter = mitt(); const coforwardUi = createApp(App); coforwardUi.provide('emitter', emitter) coforwardUi.use(store); coforwardUi.use(jQuery); coforwardUi.use(common); //coforwardUi.use(AfterLoginClass); window.coforwardUi = coforwardUi; global.$ = jQuery; coforwardUi.mount('#app');
n-test.vue
<script setup> import { ref, computed, onMounted, watch, inject, } from 'vue'; import { useStore } from 'vuex'; const store = useStore(); const bus = inject('emitter'); const $common = inject('common'); ... $common.cc('1111'); $common.dd('asd2222fadsfasdf');
참고
How to: Vue3 composition API plugin
How to create a plugin that works with the Vue3 composition API. For example a Socket.io plugin which can be accessed in every component.
stackoverflow.com
[Solved]-How to: Vue3 composition API plugin-Vue.js
Coding example for the question How to: Vue3 composition API plugin-Vue.js
www.appsloveworld.com
'프로그래밍 > Js' 카테고리의 다른 글
webRTC 이용하여 비디오 채팅 방법 with Node.js + Socket.io (0) | 2023.02.21 |
---|---|
vue3 에 tradingview 차트 연동 (소스추가) (0) | 2023.01.19 |
vue3 Composition API 에서 jQuery 사용하기 (1) | 2023.01.17 |
websocket 바이너리 전송 arraybuffer (0) | 2022.05.06 |
Shared Workers 이용하여 WebSocket 연결 방법 (웹소켓을 연결한 상태에서 새로고침 또는 다른 페이지로 이동시 웹소켓 연결을 유지하는게 목적) (0) | 2021.12.17 |