vue 구성 요소 상세 설명
1.데이터 구동-데이터 구동 인터페이스 표시
2.모듈 화-재 활용 공공 모듈,구성 요소 실현 모듈 화 기반 제공
구성 요소 기반
구성 요소 렌 더 링 과정
template---ast(추상 문법 트 리)---render--->VDom(가상 DOM)--->진실 한 Dom--->페이지
Vue 구성 요 소 는 컴 파일 이 필요 합 니 다.컴 파일 과정 은
런 타임 전용(기본 값)
vue.config.js(수 동 으로 만 들 지 않 았 다 면)
module.exports = {
runtimeCompiler: true // false
}1.문자열 형식 정의(추천 하지 않 음)
예시
const CustomButton = {
template: "<button> </button>"
};2.단일 파일 구성 요소(추천)
.vue 접미사 파일 을 만 듭 니 다.정 의 는 다음 과 같 습 니 다.
<template>
<div>
<button> </button>
</div>
</template>이러한 형식 은 포장 할 때 render 함수 로 컴 파일 되 기 때문에 이러한 방식 으로 구성 요 소 를 정의 하 는 것 을 추천 합 니 다.
구성 요소 등록
1.전역 등록
전역 등록 은 Vue.component()를 통 해 등록 합 니 다.
import CustomButton from './components/ComponentDemo.vue'
Vue.component('CustomButton', CustomButton)알맞다
필요 한 곳 에 가 져 오기
<template>
<div id="app">
<customButton></customButton>
</div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";
export default {
name: "App",
components: { CustomButton }
};
</script>구성 요소 재 활용
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<customButton></customButton>
<customButton></customButton>
<customButton></customButton>
</div>
</template>
<template>
<div id="app">
<button @click="increment">click me {{times}} times</button>
</div>
</template>
<script>
export default {
data() {
return { times: 0 };
},
methods: {
increment() {
return this.times++;
}
}
};
</script>모듈 전송
1.props 속성 통과 하기
button 을 정의 합 니 다.단추 텍스트 는 props 를 통 해 전 달 됩 니 다.
<template>
<button> {{buttonText}} </button>
</template>
<script>
export default {
props: {
buttonText: String
}
};
</script>
<customButton buttonText="Button 1"></customButton>
<customButton buttonText="Button 2"></customButton>
<customButton buttonText="Button 3"></customButton>
2.슬롯
구성 요 소 는 교체 할 곳 에 슬롯
<template>
<button style="margin:10px"><slot>Defalt Button</slot></button>
</template>
<script>
export default {
props: {
buttonText: String
}
};
</script>실행 효과
메모:사용자 정의 구성 요소 의 innerHtml 로 플러그 인 을 교체 하 는 것 을 보 았 습 니 다.플러그 인 이 하나 일 경우 name attribute 를 쓰 지 않 아 도 됩 니 다.여러 플러그 인 이 플러그 인 을 지정 해 야 할 경우 name attribute
사용자 정의 이벤트
1.구성 요소 내부 에서 this.$emit 를 호출 하여 사용자 정의 이 벤트 를 실행 합 니 다.
<template>
<div style="margin:10px">
<button @click="increment">
<slot>Defalt Button</slot>
</button>
<span>Click me {{times}} times</span>
</div>
</template>
<script>
export default {
props: {
buttonText: String
},
data() {
return { times: 0 };
},
methods: {
increment() {
this.times++;
("increment");
}
}
};
</script>
<template>
<div id="app">
<customButton @increment="handleIncrement"></customButton>
<customButton @increment="handleIncrement">
<span style="color:blue">Button 2</span>
</customButton>
<customButton @increment="handleIncrement">Button 3</customButton>
<p>Total click {{totalClicks}} times</p>
</div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";
export default {
name: "App",
components: { CustomButton },
data() {
return { totalClicks: 0 };
},
methods: {
handleIncrement() {
this.totalClicks++;
}
}
};
</script>
이상 은 vue 구성 요소 의 상세 한 내용 을 상세 하 게 설명 하 는 것 입 니 다.vue 구성 요소 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
