Vue3로 간단한 컴포넌트 작성

vue3 슬롯 슬롯

Vue3에서 슬롯(Slots)은 기본적으로 Vue2와 같은 방식으로 사용되지만 약간의 차이가 있습니다. 다음은 Vue3에서 슬롯을 사용하는 예입니다.

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <slot></slot>
  </div>
</template>

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent>
      <p>This is the content of the slot.</p>
    </ChildComponent>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'

  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  })
</script>

위의 예에서 ChildComponent 구성 요소는 기본 슬롯을 정의하고 <slot></slot> 레이블을 사용하여 슬롯의 위치를 나타냅니다. ParentComponent 구성 요소 에서 <ChildComponent> 콘텐츠의 일부는 태그로 래핑되며 이 콘텐츠는 구성 요소의 슬롯 <p>This is the content of the slot.</p>에 삽입됩니다 .ChildComponent

Vue3에서는 기본 슬롯에 더 이상 명명된 슬롯의 개념이 없다는 점에 유의해야 합니다. 명명된 슬롯을 사용해야 하는 경우 v-slot 지시문을 사용할 수 있습니다. 다음은 예입니다.

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent>
      <template v-slot:header>
        <h3>This is the header slot</h3>
      </template>
      <p>This is the content of the default slot.</p>
      <template v-slot:footer>
        <p>This is the footer slot</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'

  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  })
</script>

위의 예에서 ChildComponent 구성 요소는 header, default 및 named 라는 세 개의 슬롯을 정의합니다 footer . ParentComponent 구성 요소 에서 슬롯의 내용을 <template v-slot:header> 정의하는 데 사용하고 슬롯의 내용을 정의하는 데 사용합니다. 기본 슬롯은 구성 요소 태그 내부에 직접 쓸 수 있습니다.header<template v-slot:footer>footer

Vue3에서는 일반 HTML 태그가 아닌 태그 v-slot 에만 사용할 수 있다는 점에 유의해야 합니다 . <template>일반 HTML 태그에 슬롯을 사용하려는 경우 사용할 수 있는 v-slot 속기 구문 입니다 #. 예를 들어 는 로 <template v-slot:header> 축약할 수 있습니다 #header.

vue3 구성 요소 수명 주기

Vue3에서 구성 요소의 수명 주기 후크 기능은 Vue2에서 일부 변경되었습니다. 다음은 Vue3에서 일반적으로 사용되는 구성 요소 수명 주기 후크 함수입니다.

beforeCreate: 인스턴스 초기화 후 데이터 관찰 전에 호출됩니다.
created: 인스턴스가 생성된 후 호출됩니다. 이 시점에서 인스턴스는 데이터 관찰, 특성 및 메서드에 대한 작업을 완료했지만 아직 DOM에 탑재되지 않았습니다.
beforeMount: 마운트가 시작되기 전에 호출됩니다. 이 단계에서 템플릿은 컴파일되었지만 템플릿은 아직 DOM으로 렌더링되지 않았습니다.
mounted: 마운트가 완료된 후 호출됩니다. 이 시점에서 구성 요소는 DOM에 마운트되었으며 DOM 요소에 액세스할 수 있습니다.
beforeUpdate: 데이터가 업데이트되기 전에 호출됩니다. 이 단계에서 가상 DOM이 다시 렌더링되고 계산된 변경 사항이 실제 DOM에 적용되었지만 뷰에서 아직 업데이트되지 않았습니다.
updated: 데이터 업데이트 후 호출됩니다. 이 시점에서 구성 요소가 최신 상태로 업데이트되었으며 DOM도 업데이트되었습니다.
beforeUnmount: 구성 요소가 마운트 해제되기 전에 호출됩니다. 이 단계에서 구성 요소 인스턴스는 계속 사용할 수 있으며 구성 요소의 데이터 및 메서드에 액세스할 수 있습니다.
unmounted: 구성 요소가 마운트 해제된 후 호출됩니다. 이 시점에서 구성 요소 인스턴스는 소멸되었으며 구성 요소의 데이터 및 메서드에 더 이상 액세스할 수 없습니다.

beforeDestroy 및 와 같은 일부 수명 주기 후크 함수는 Vue3에서 제거되었습니다 destroyed. 대신 beforeUnmount 및 unmounted.

또한 Vue3는 새로운 수명 주기 후크 기능을 도입 onRenderTracked 하고 onRenderTriggered렌더링 프로세스 및 구성 요소의 트리거된 종속성을 추적하는 데 사용됩니다.

Vue3는 수명 주기 후크 함수에 의존하는 대신 구성 요소 로직을 작성하기 위해 Composition API를 사용할 것을 권장합니다. Composition API는 setup 구성 요소의 초기화 및 논리적 구성을 위한 기능을 제공합니다. setup 함수 에서 onBeforeMount, onMounted, onBeforeUpdate, 등의 함수를 사용하여 해당 수명 주기 후크 함수를 대체할 수 있습니다 onUpdated.onBeforeUnmount

vue3 라이프 사이클 애플리케이션

Vue3의 수명 주기 후크 기능을 사용하여 구성 요소의 다양한 수명 주기 단계에서 해당 작업을 수행할 수 있습니다. 다음은 Vue3 수명 주기에 대한 애플리케이션 시나리오의 몇 가지 예입니다.

1、beforeCreate And created: 초기 데이터 설정, 비동기 요청 등 컴포넌트 인스턴스 생성 전후에 일부 초기화 작업을 수행합니다.

export default {
  beforeCreate() {
    console.log('beforeCreate hook');
    // 执行一些初始化操作
  },
  created() {
    console.log('created hook');
    // 执行一些初始化操作
  },
};

2、beforeMount And mounted: DOM 요소 가져오기, 이벤트 바인딩 등과 같은 구성 요소가 마운트되기 전후에 일부 DOM 작업을 수행합니다.

export default {
  beforeMount() {
    console.log('beforeMount hook');
    // 执行一些 DOM 操作
  },
  mounted() {
    console.log('mounted hook');
    // 执行一些 DOM 操作
  },
};

3、beforeUpdate 그리고 updated: DOM 업데이트, 요청 전송 등과 같은 구성 요소 데이터 업데이트 전후에 일부 작업을 수행합니다.

export default {
  beforeUpdate() {
    console.log('beforeUpdate hook');
    // 执行一些操作
  },
  updated() {
    console.log('updated hook');
    // 执行一些操作
  },
};

4、beforeUnmount And unmounted: 구독 취소, 타이머 지우기 등과 같이 구성 요소가 마운트 해제되기 전후에 일부 정리 작업을 수행합니다.

export default {
  beforeUnmount() {
    console.log('beforeUnmount hook');
    // 执行一些清理操作
  },
  unmounted() {
    console.log('unmounted hook');
    // 执行一些清理操作
  },
};

이 예제는 Vue3 수명 주기 후크의 일반적인 사용 사례를 보여줍니다. 특정 요구 사항에 따라 해당 수명 주기 후크 기능에서 적절한 작업을 수행할 수 있습니다.

vue3 동적 구성요소

Vue3에서는 동적 구성 요소를 사용하여 다양한 조건 또는 상태에 따라 다양한 구성 요소를 동적으로 렌더링할 수 있습니다. 동적 구성 요소를 사용하면 응용 프로그램을 보다 유연하고 확장 가능하게 만들 수 있습니다. 다음은 동적 구성 요소를 사용하는 예입니다.

1. component 요소와 :is 속성을 사용하여 동적 구성 요소를 렌더링합니다.

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

위의 예에서 또는 구성 요소는 currentComponent 의 값에 따라 동적으로 렌더링됩니다 . 버튼을 클릭하면 값을 전환하여 동적 구성 요소의 전환을 실현합니다.ComponentAComponentBcurrentComponent

2. v-if 및 를 사용하여 v-else 조건에 따라 다른 구성요소를 렌더링합니다.

<template>
  <div>
    <component-a v-if="showComponentA"></component-a>
    <component-b v-else></component-b>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      showComponentA: true,
    };
  },
  methods: {
    toggleComponent() {
      this.showComponentA = !this.showComponentA;
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

위의 예에서 또는 구성 요소는 및 의 값에 showComponentA 따라 렌더링됩니다 . 버튼을 클릭하면 값을 전환하여 동적 구성 요소의 전환을 실현합니다.v-ifv-elseComponentAComponentBshowComponentA

이 예제는 Vue3에서 동적 구성 요소를 사용하여 조건 또는 상태에 따라 다양한 구성 요소를 동적으로 렌더링하는 방법을 보여줍니다. 특정 요구 사항에 따라 동적 구성 요소를 사용하는 적절한 방법을 선택할 수 있습니다.

vue3 구성 요소는 계속 살아 있습니다.

Vue3에서는 <keep-alive> 구성 요소를 사용하여 구성 요소를 활성 상태로 유지할 수 있습니다. 구성 요소가 구성 요소 트리에서 전환되거나 소멸되더라도 해당 상태는 계속 유지됩니다. 이는 상태 또는 캐시된 데이터를 구성 요소 간에 공유해야 하는 시나리오에 유용합니다. <keep-alive> 다음은 구성 요소를 사용하여 구성 요소를 활성 상태로 유지하는 예입니다 .

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

위의 예에서 using <keep-alive> 컴포넌트는 <component> 래핑되어 컴포넌트가 전환될 때 래핑된 컴포넌트의 상태가 유지됩니다. 버튼을 클릭하면 currentComponent 값을 전환하여 렌더링할 구성 요소를 전환합니다.

래핑된 구성 요소가 전환되면 및 와 <keep-alive> 같은 일부 특정 수명 주기 후크 기능이 트리거된다는 점에 유의해야 합니다 . 포커스 가져오기, 요청 보내기 등과 같은 일부 특정 작업을 이러한 후크 기능에서 수행할 수 있습니다.activateddeactivated

<template>
  <div>
    <h2>Component A</h2>
  </div>
</template>

<script>
export default {
  activated() {
    console.log('Component A activated');
    // 执行一些操作
  },
  deactivated() {
    console.log('Component A deactivated');
    // 执行一些操作
  },
};
</script>

위의 예에서 구성 요소 A가 활성화되거나 비활성화되면 해당 정보가 후크 함수 activated 및 각각에 출력됩니다.deactivated

구성 요소는 <keep-alive> 구성 요소를 활성 상태로 유지하고 구성 요소 간에 상태 또는 캐시 데이터를 공유하는 편리한 방법입니다.

vue3 비동기 컴포넌트

Vue3에서는 비동기 구성 요소를 사용하여 구성 요소의 코드 로드를 지연할 수 있으므로 애플리케이션의 성능과 로드 속도가 향상됩니다. 앱 초기화 시 모든 구성 요소 코드가 로드되지 않고 필요할 때 비동기 구성 요소가 로드됩니다. 다음은 비동기 구성 요소를 사용하는 예입니다.

1. defineAsyncComponent 함수를 사용하여 비동기 구성 요소를 정의합니다.

<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <component v-if="isComponentLoaded" :is="component"></component>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./Component.vue')
);

export default {
  data() {
    return {
      isComponentLoaded: false,
      component: null,
    };
  },
  methods: {
    loadComponent() {
      this.isComponentLoaded = true;
      this.component = AsyncComponent;
    },
  },
};
</script>

위의 예에서 defineAsyncComponent 함수는 비동기 구성 요소를 정의하는 데 사용됩니다 AsyncComponent. 버튼을 클릭하면 isComponentLoaded 로 설정되고 로 설정 true되어 비동기 구성 요소를 로드합니다.componentAsyncComponent

2. Suspense 구성 요소를 사용하여 비동기 구성 요소의 로드 상태를 처리합니다.

<template>
  <div>
    <Suspense>
      <template #default>
        <component :is="component"></component>
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
    <button @click="loadComponent">Load Component</button>
  </div>
</template>

<script>
import { defineAsyncComponent, Suspense } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./Component.vue')
);

export default {
  data() {
    return {
      component: null,
    };
  },
  methods: {
    loadComponent() {
      this.component = AsyncComponent;
    },
  },
};
</script>

위의 예에서 Suspense 구성 요소는 비동기 구성 요소의 로드 상태를 처리하는 데 사용됩니다. 슬롯 에서 default 비동기 구성 요소를 렌더링하고 fallback 슬롯에서 로드 상태의 힌트 메시지를 렌더링합니다. 버튼을 클릭하면 비동기 구성 요소가 로드됩니다.

이 예제는 비동기 구성 요소를 사용하여 Vue3에서 구성 요소 코드를 지연 로드하는 방법을 보여줍니다. 비동기 구성 요소를 사용하면 특히 앱에 많은 구성 요소가 있는 경우 앱의 성능과 로드 속도를 향상시킬 수 있습니다.

vue3 종속성 주입

Vue3에서는 종속성 주입을 사용하여 구성 요소 간에 데이터 또는 기능을 공유할 수 있습니다. Vue3는 종속성 주입을 구현하는 두 가지 기능을 provide 제공 합니다.inject

1. provide 기능을 사용하여 상위 구성 요소에 데이터 또는 기능을 제공합니다.

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import { provide } from 'vue';
import MyService from './MyService';

export default {
  setup() {
    provide('myService', new MyService());
  },
};
</script>

위의 예에서 provide 함수를 사용하면 myService 값이 의 인스턴스인 상위 구성 요소에 명명된 데이터 또는 함수가 제공됩니다 MyService .

2. inject 함수를 사용하여 제공된 데이터 또는 기능을 하위 구성 요소에 삽입합니다.

<template>
  <div>
    <p>{
   
   { message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const myService = inject('myService');
    const message = myService.getMessage();

    return {
      message,
    };
  },
};
</script>

위의 예에서 inject 부모 구성 요소가 제공하는 myService 데이터 또는 기능은 함수를 사용하여 자식 구성 요소에 주입됩니다. 삽입된 myService 인스턴스를 통해 메서드를 호출하거나 속성에 액세스할 수 있습니다.

provide 및 기능을 사용하여 inject 구성 요소 간에 종속성 주입을 구현하여 데이터 또는 기능을 공유할 수 있습니다. 이는 여러 구성 요소가 동일한 데이터 또는 기능에 액세스해야 하는 경우에 유용합니다.

vue3 애플리케이션

Vue3는 사용자 인터페이스를 구축하기 위한 최신 JavaScript 프레임워크입니다. 반응형 데이터 바인딩, 구성 요소화, 가상 DOM과 같은 기능이 있어 개발자가 대화형 웹 애플리케이션을 보다 효율적으로 구축할 수 있습니다.

다음은 Vue3를 사용하여 애플리케이션을 개발하는 몇 가지 단계입니다.

1. Vue3 설치: npm 또는 yarn을 사용하여 Vue3의 최신 버전을 설치합니다.

npm install vue@next

2. Vue3 애플리케이션 만들기: 새 Vue3 프로젝트를 만듭니다.

vue create my-app

3. 구성 요소 작성: src 디렉터리에 구성 요소 파일을 만듭니다(예: HelloWorld.vue.

<template>
  <div>
    <h1>{
   
   { message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue3!');

    const changeMessage = () => {
      message.value = 'Hello, World!';
    };

    return {
      message,
      changeMessage,
    };
  },
};
</script>

위의 예에서 ref 반응형 데이터는 함수를 사용하여 생성되고 message템플릿에서 사용됩니다. 버튼을 클릭하면 message 값을 변경할 수 있습니다.

4. 구성 요소 사용: App.vue 에서 사용자 지정 구성 요소를 사용합니다.

<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld,
  },
};
</script>

위의 예에서는 커스텀 HelloWorld 컴포넌트를 가져와 등록하여 템플릿에 사용합니다.

5. 애플리케이션 실행: 명령줄에서 다음 명령을 실행하여 애플리케이션을 시작합니다.

npm run serve

이렇게 하면 개발 서버가 시작되고 브라우저에서 앱이 열립니다.

이것은 단순한 예일 뿐이며 실제 필요에 따라 더 복잡한 구성 요소와 애플리케이션 로직을 작성할 수 있습니다. Vue3는 또한 라우팅, 상태 관리, 단일 파일 구성 요소 등과 같은 다른 많은 기능과 도구를 제공하여 더 강력한 애플리케이션을 구축하는 데 도움을 줍니다.

이 간단한 예제가 Vue3 애플리케이션 개발을 시작하는 데 도움이 되기를 바랍니다!

확장: Vue 프레임워크를 사용하는 로우 코드 플랫폼은 무엇입니까?

JNPF 신속한 개발 플랫폼은 그 중 하나이며 자세한 내용은 공식 웹사이트에서 확인할 수 있습니다. 백엔드는 java+.net 6 이중 기술 엔진을 깊이 통합하고 프런트 엔드는 Vue3.x, vue-router4.x, Vite4.x, Ant-Design-Vue3.x, TypeScript, pinia, less Background 솔루션, pnpm 패키지 관리 도구를 사용하세요. 장면 모델링, 인터페이스 개발, 시스템 도킹, 구성 요소 확장, 동시 데이터 처리, 동적 메뉴, 권한 확인, 버튼 수준 권한 제어 및 다른 기능.

자세한 내용은 공식 웹 사이트로 이동하여 더 많은 것을 경험할 수 있습니다. https://www.jnpfsoft.com/?csdn

강력한 동적 정보 데이터 모델을 통해 애플리케이션을 빠르게 생성할 수 있습니다! JNPF는 로우 코드 개발 모델을 선도하여 엔터프라이즈 프로젝트의 반복 작업의 70%를 해결하여 개발이 비즈니스에 더 집중할 수 있도록 합니다. 유연성을 잃지 않으면서 신속하게 효율성을 개선하고 비용을 절감할 수 있습니다.

마침내

Vue3가 로우코드 플랫폼의 프론트엔드 프레임워크에서 사용되든 어디에서 사용되든 매우 실용적인 선택입니다. 컴포넌트 기반 개발, 양방향 바인딩, 라우팅 등이 뛰어나고 사용하기 쉽습니다.