Vue.js 구성 요소 에 대한 간단 한 설명(2)
child 하위 구성 요 소 를 정의 합 니 다.이 하위 구성 요소 에 내용 을 추가 하려 면 하위 구성 요소 의 template 에서 정의 해 야 합 니 다.부모 구성 요소 의
하위 구성 요소 에
슬롯 내용
<!-- submit-button -->
<button type="submit">
<slot>Submit</slot>
</button>
1.
<submit-button></submit-button>
⬇️
<button type="submit">
Submit
</button>
2.
<submit-button>
Save
</submit-button>
⬇️
<button type="submit">
Save
</button>부모 템 플 릿 의 모든 내용 은 부모 역할 영역 에서 컴 파일 되 었 습 니 다.하위 템 플 릿 의 모든 내용 은 하위 역할 영역 에서 컴 파일 되 었 습 니 다.
서명 슬롯
생각해 보 니,우 리 는 다음 과 같은 모델 을 가 진
<div class="container">
<header>
<!-- -->
</header>
<main>
<!-- -->
</main>
<footer>
<!-- -->
</footer>
</div>
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>구명 슬롯 에 내용 을 제공 할 때,우 리 는요소 에서 v-slot 명령 을 사용 하고,v-slot 의 매개 변수 형식 으로 그 이름 을 제공 할 수 있다.
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>물론 기본 슬롯 의 내용 을 v-slot:default 로 감 쌀 수도 있 습 니 다.
v-slot 는 하나의에 만 추가 할 수 있 습 니 다.
역할 영역 슬롯
플러그 인 내용 이 하위 구성 요소 에 만 있 는 데이터 에 접근 할 수 있 도록 하려 면 데 이 터 를
<span>
<slot v-bind:user="user">
{{ user.name }}
</slot>
</span>
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.age }}
</template>
</current-user>제 공 된 내용 이 기본 슬롯 만 있 을 때 위의 쓰기 방법 은 간소화 할 수 있 습 니 다.
<!-- -->
<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user>
<!-- -->
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>재 구성 슬롯 Prop
역할 영역 슬롯 의 내부 작업 원 리 는 슬롯 내용 을 하나의 매개 변수 로 전달 하 는 함수 에 포함 시 키 는 것 입 니 다.
function (slotProps) {
//
}
<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user>
⬇️
<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>플러그 인 prop 는 플러그 인 을 재 활용 가능 한 템 플 릿 으로 변환 할 수 있 습 니 다.이 템 플 릿 들 은 입력 한 prop 를 기반 으로 서로 다른 내용 을 렌 더 링 할 수 있 습 니 다.
이것 은 패 키 징 데이터 논 리 를 설계 하 는 동시에 부모 급 구성 요소 가 일부 레이아웃 을 사용자 정의 할 수 있 는 재 활용 구성 요 소 를 사용 할 때 가장 유용 합 니 다.
동적 슬롯 이름
동적 명령 파라미터 도 v-slot 에 사용 하여 동적 슬롯 이름 을 정의 할 수 있 습 니 다.
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>v-slot 는\#로 줄 일 수 있 습 니 다.
줄 임 말 방식 은 인자 가 있 을 때 만 사용 할 수 있 습 니 다.
<!-- -->
<current-user #="{ user }">
{{ user.firstName }}
</current-user>
<!-- -->
<current-user #default="{ user }">
{{ user.firstName }}
</current-user>이 구성 요소 들 사이 에서 전환 할 때,반복 적 으로 과장 되 어 발생 하 는 성능 문 제 를 피하 기 위해 이 구성 요소 들 의 상 태 를 유지 하고 싶 을 때 가 있 습 니 다.이 문 제 를 해결 하기 위해 서,우 리 는 동적 구성 요 소 를
<!-- ！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>앞으로 우리 실전 과정 에서 만 났 다 면 전문 해설 을 해 보 자.
비동기 구성 요소
실제 프로젝트 과정 에서 우 리 는 일련의 기능 을 작은 코드 블록 으로 나 누 어 필요 할 때 만 불 러 오 기 를 바란다.이 목적 을 달성 하기 위해 Vue 는 공장 함수 로 구성 요 소 를 정의 할 수 있 습 니 다.이 공장 함 수 는 구성 요소 의 정 의 를 비동기 적 으로 해석 합 니 다.
Vue 는 이 구성 요소 가 렌 더 링 이 필요 할 때 만 이 공장 함 수 를 실행 하고 결 과 를 캐 시 해서 사용 합 니 다.
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// `resolve`
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})하나의 추천 방법 은 비동기 구성 요소 와 webpack 의 code-splitting 기능 을 결합 하여 사용 하 는 것 입 니 다.
Vue.component('async-webpack-example', function (resolve) {
// `require` webpack
// ，
// Ajax
require(['./my-async-component'], resolve)
})
Vue.component(
'async-webpack-example',
// `import` `Promise` 。
() => import('./my-async-component')
)위의 공장 함 수 는 아래 형식의 대상 을 되 돌려 줄 수 있다.
const AsyncComponent = () => ({
// ( `Promise` )
component: import('./MyComponent.vue'),
//
loading: LoadingComponent,
//
error: ErrorComponent,
// 。 200 ( )
delay: 200,
// ，
// 。 ：`Infinity`
timeout: 3000
})이 편 에서 우 리 는 주로 Vue 구성 요소 의 슬롯 과 관련 동적 구성 요소,비동기 구성 요소 의 내용 을 중심 으로 정리 했다.이 두 편의 정 리 를 통 해 우 리 는 Vue 구성 요소 에 대해 비교적 전체적인 이 해 를 가지 게 되 었 다.추 후 실전 과정 에서 구체 적 인 점 에 대해 서 더 자세히 설명 하 겠 습 니 다.
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue.js 구성 요소 의 상세 한 해석 과 통합 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
