VUE3 개발 기본 사항: 확장을 사용하여 구성 요소 상속

Vue는 현재 가장 인기 있는 프런트 엔드 프레임워크 중 하나이며 VUE3은 Vue 프레임워크의 최신 버전입니다. VUE2에 비해 VUE3는 더 높은 성능과 더 나은 개발 경험을 제공하며 많은 개발자의 첫 번째 선택이 되었습니다. VUE3에서는 익스텐트를 사용하여 컴포넌트를 상속하는 것이 매우 실용적인 개발 방법입니다. 이 글에서는 익스텐트를 사용하여 컴포넌트를 상속하는 방법을 소개합니다.

1. 익스텐스가 무엇인가요?

Vue에서 확장은 하위 구성 요소가 상위 구성 요소의 옵션을 상속하는 데 사용할 수 있는 매우 실용적인 속성입니다. 예를 들어 템플릿은 상위 구성 요소에 정의되고 확장 속성을 통해 하위 구성 요소에 전달됩니다. . 템플릿을 다시 정의하지 않고 구성 요소에서 직접 사용할 수 있습니다. 이 상속 방식은 코드 재사용을 실현하고 코드 양을 줄이며 개발 효율성을 향상시킬 수 있습니다.

2. 연장을 사용하는 방법은 무엇입니까?

먼저 상위 구성 요소를 정의하고 템플릿을 정의한 후 HelloWorld.vue와 같은 별도의 파일로 저장해야 합니다.

<template>
  <div>
    <h1>Hello, {{name}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'Vue3'
    },
    content: {
      type: String,
      default: 'Welcome to Vue3'
    }
  }
}
</script>

상위 구성 요소에서는 다음을 통해 해당 템플릿을 하위에 전달해야 합니다. Component 속성을 확장하고 정의된 템플릿을 Mixins.js 파일로 저장합니다. 예:

export default {
  extends: HelloWorld    //继承HelloWorld.vue
}

HelloWorld 여기에 상위 구성 요소에 정의한 구성 요소 이름이 있습니다.

다음으로 하위 구성 요소에 Mixins.js를 도입하고 확장을 사용하여 상위 구성 요소 옵션을 상속하고 App.vue와 같은 별도의 파일로 저장해야 합니다.

<template>
  <div>
    <HelloWorld />    //使用extends继承HelloWorld.vue的模板
    <p>{{message}}</p>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Mixins from './Mixins'

export default {
  mixins: [Mixins],    //引入Mixins.js
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'This is App.vue'
    }
  }
}
</script>

mixins 속성을 사용하여 Mixins를 도입합니다. Node.js, 템플릿에서 이 구성 요소를 사용합니다. 마지막으로 하위 구성 요소인 App.vue를 Vue 애플리케이션의 루트 구성 요소로 렌더링해야 합니다. 예를 들면 다음과 같습니다.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3. Summary

extend를 사용하여 구성 요소를 상속하는 것은 코드를 구현하는 데 도움이 될 수 있는 매우 실용적인 개발 방법입니다. 재사용 개발 효율성을 향상시킵니다. VUE3에서는 확장 속성의 사용이 매우 간단합니다. 상위 구성 요소와 하위 구성 요소에서 템플릿과 상속 관계만 정의하면 됩니다. 이 기사가 개발자에게 도움이 되고 VUE3 개발을 더욱 편안하게 사용할 수 있기를 바랍니다.

위 내용은 VUE3 개발 기본 사항: 확장을 사용하여 구성 요소 상속의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!