소행성왕자

부모에서 자식으로 데이터 전달부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 props를 사용합니다.ParentComponent.vue ChildComponent.vue 자식에서 부모로 데이터 전달자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 emit을 사용합니다.ChildComponent.vue Send Message to ParentParentComponent.vue {{ childMessage }} 위 예제에서는 부모 컴포넌트에서 자식 컴포넌트로 메시지를 props를 통해 전달하고, 자식 컴포넌트에서 부모 컴포넌트로 메시지를 emit을 통해 전달합니다. props와 emit을 함께 사용하여 부모와 자식 컴포넌트 간의 데이터를 효과적으로 주고받을 수..

오류코드import { defineStore } from 'pinia';import { ref, computed } from 'vue';export const useData365MastStore = defineStore('data365Master', () => { const data365Master = ref({}); const getData365Master = (prdcd) => { return computed(() => data365Master.value); }; return { data365Master, getData365Master };});개선코드import { defineStore } from 'pinia';import { ref, computed } from 'vue..

원본 코드const loadChartDatahandler = data=>{ // to do};onUnmounted(()=>{ emitter.off('loadChartData', loadChartDatahandler) }):onMounted(()=>{ emitter.on('loadChartData', data=>{ loadChartDatahandler(data); })}); Vue 3에서 이벤트 리스너를 등록하고 해제하는 과정에서 loadChartData 배열의 길이가 계속 늘어난다면, 이는 이벤트 리스너가 제대로 제거되지 않았기 때문일 가능성이 큽니다. 이 문제를 해결하려면 이벤트 리스너를 등록할 때 사용하는 함수 참조를 일관되게 유지해야 합니다.문제는 onMoun..

문제 설명Vue3를 사용하는 프로젝트에서 웹에서는 emitter를 통해 이벤트가 정상적으로 전달되지만, 모바일 앱에서는 이벤트가 전달되지 않는 문제가 발생했습니다. 문제의 원인은 웹과 모바일의 초기 접근 파일이 다르기 때문입니다.문제 원인웹 초기 접근 파일: AppTr.vue모바일 초기 접근 파일: AppMobileTr.vue문제가 발생한 컴포넌트는 infoChartToTr.vue입니다. 이 컴포넌트가 웹에서는 AppTr.vue에 import 되어 있어 이벤트가 정상적으로 처리되지만, 모바일에서는 AppMobileTr.vue에 import 되어 있지 않아 이벤트가 처리되지 않았습니다.해결 방법모바일 초기 접근 파일인 AppMobileTr.vue에 infoChartToTr.vue 컴포넌트를 import 하..

이 코드에서 defineEmits는 emit 함수를 반환합니다. emit 함수를 사용하여 이벤트를 발생시킬 수 있습니다. 위의 코드에서는 'Click me' 버튼을 클릭할 때 notifyParent 함수가 실행되면서 'notify'라는 이벤트를 부모 컴포넌트로 발송합니다. 이를 부모 컴포넌트에서 사용하려면 다음과 같이 할 수 있습니다: Child notified! 이렇게하면 자식 컴포넌트에서 발생한 'notify' 이벤트를 감지하고, 그에 대한 처리를 수행할 수 있습니다. 을 사용하면 코드가 간결해지고 가독성이 향상되는 등의 이점을 얻을 수 있습니다.

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { nodePolyfills } from 'vite-plugin-node-polyfills' import fs from 'fs-extra' //import { viteSingleFile } from "vite-plugin-singlefile" export default defineConfig({ worker: { format: 'es', }, build: { lib: { entry: './src/main.js', name: 'my-library', format: 'es', }, //..

Vue 3의 defineExpose 함수는 Composition API와 함께 사용되며 컴포넌트의 내부 로직을 외부에서 액세스 가능하게 만들 때 사용됩니다. 기본적으로 Vue 3에서는 컴포넌트 내부의 상태와 메서드가 비공개(private)이며 컴포넌트 외부에서 직접 액세스할 수 없습니다. 그러나 defineExpose를 사용하면 컴포넌트의 일부를 외부로 노출하고 다른 컴포넌트에서 액세스할 수 있도록 할 수 있습니다. defineExpose는 컴포넌트 내부에서 호출되며 다음과 같이 사용됩니다: main.vue # 외부에 공개할 함수 선언 compo.vue Show Message defineExpose를 사용하여 컴포넌트의 일부를 외부로 노출하면 컴포넌트 간의 상호 작용 및 재사용성을 높일 수 있습니다. 그..

import { createRouter, createWebHashHistory } from 'vue-router' import Home from '@/components/home.vue'; import About from '@/components/about.vue'; import Flutter from '@/components/n_flutter.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/flutter', component: Flutter }, ] const router = createRouter({ history: createWebHashHistory(), rout..

webview_flutter : 안드로이드에서는 정상 작동하지만 iOS 에서는 alert 을 비롯한 알수없게 작동안된다. => InAppWebViewController 로 변경 목적 : flutter 와 웹뷰(vue3) 의 양방향 통신방법에 대해서 알아본다. 전제 조건 : vue3 에서는 쉐워드워커, 워커를 사용하기 때문에 워커에서는 flutter 의 웹뷰로 의 양방향 통신은 불가능하다. 프로세스 흐름 - input (request) ui 에서 Tr 클릭 (n_flutter.vue) Tr input 객체를 만들어 Worker 로 전송 $Worker.send(data); (n_flutter.vue) js/index.js 의 send 함수에서 웹인지 앱인지 체크 (/js/index.js) inputHexSt..

vue3 에서 options API 사용할때 watch 사용방법을 알아보도록 하겠습니다. options API 에서는 setup() 할수 안에서 아래와 같이 watch 사용합니다. 첫번째 방법 import { useStore } from 'vuex'; export default { ... ... setup() { const store = useStore(); store.watch(_=>store.getters.afterLogin, _=>{ console.log(store.getters.afterLogin); }); store.watch(_=>store.getters.ofprInfo, _=>{ console.log(store.getters.ofprInfo); }, {deep:true}); }, mounte..