vue 부자 구성 요소 간 참조$parent,$children
$on(),$emit()을 생각 할 것 이다.그림 과 같다.
즉,일반적인 상황 에서 하위 구성 요 소 는 부모 구성 요소 나 Vue 인 스 턴 스 의 데 이 터 를 참조 할 수 없 지만 개발 에 나타 난'데 이 터 는 구성 요소 에서 왔 다 갔다 전달 해 야 합 니 다'에 대해 가장 간단 한 해결 방법 은 props(v-on)를 통 해 데 이 터 를 부모 구성 요소 에서 하위 구성 요소 로 전달 하고
$emit로 데 이 터 를 하위 구성 요소 에서 부모 구성 요소 로 전달 하 는 것 입 니 다.반복 해서 참조 합 니 다.그러나 다른 장면 에서 우 리 는(부모 구성 요소 에서)하위 구성 요소 대상 을 가 져 온 다음 에 그 중의 데 이 터 를 직접 조작 하여 일부 기능 을 실현 하고 싶 을 수도 있다.예 를 들 어 방법의 호출 이다.
부모 구성 요소 가 하위 구성 요소 에 직접 접근 하거나 하위 구성 요소 가 부모 구성 요소 에 직접 접근 하거나 하위 구성 요소 가 루트 구성 요소 에 접근 해 야 할 때 가 있 습 니 다.
$children또는$refsreference$parentchildren 은 매우 특별 합 니 다.자 료 를 찾 아 보면
this.$children은 하나의 배열 형식 으로 모든 하위 구성 요소 대상 을 포함 하고 있 습 니 다.
<body>
<div id="app">
<mxc></mxc>
<mxc></mxc>
<mxc></mxc>
<button @click="btnClick"> </button>
</div>
<template id="mxc">
<div> </div>
</template>
<script>
const app=new Vue({
el:'#app',
data:{
message:' '
},
methods:{
btnClick(){
console.log(this.$children)
}
},
components:{
mxc:{
template:'#mxc',
methods:{
showMessage(){
console.log('mxcnb')
}
}
}
}
})
</script>
</body>
우 리 는 또한 순환 을 통 해 모든 하위 구성 요소 의 데 이 터 를 얻 을 수 있다.
<body>
<div id="app">
<mxc></mxc>
<mxc></mxc>
<mxc></mxc>
<button @click="btnClick"> </button>
</div>
<template id="mxc">
<div> </div>
</template>
<script>
const app=new Vue({
el:'#app',
data:{
message:' '
},
methods:{
btnClick(){
console.log(this.$children)
for(let c of this.$children){
console.log(c.name)
}
}
},
components:{
mxc:{
template:'#mxc',
data(){
return{
name:' name'
}
},
methods:{
showMessage(){
console.log('mxcnb')
}
}
}
}
})
</script>
</body>
배열 이기 때문에 우 리 는 예 를 들 어
this.$children[2]를 통 해 세 번 째 구성 요소 의 데 이 터 를 얻 을 수 있다.그러나 이렇게 하면 한 가지 문제 가 있다.예 를 들 어 개발 할 때 갑자기 이 세 개의 하위 구성 요소 에 하나의 하위 구성 요 소 를 삽입 했다(같 을 수도 있 고 다 를 수도 있다).이때[2]는 더 이상 우리 가 필요 로 하 는 것 이 아니다.
그래서 우 리 는 vue-DOM 의 빛 으로:
$refs:
<body>
<div id="app">
<mxc></mxc>
<mxc></mxc>
<mxc ref="aaa"></mxc>
<button @click="btnClick"> </button>
</div>
<template id="mxc">
<div> </div>
</template>
<script>
const app=new Vue({
el:'#app',
data:{
message:' '
},
methods:{
btnClick(){
console.log(this.$refs)
console.log(this.$refs.aaa)
}
},
components:{
mxc:{
template:'#mxc',
data(){
return{
name:' name'
}
},
methods:{
showMessage(){
console.log('mxcnb')
}
}
}
}
})
</script>
</body>
왜"DOM 의 빛"이 라 고 불 러 요?네 이 티 브 JS 의
document.querySelector('xxx')기능 과 마찬가지 로 vue 에서 요소/일치 하 는 구성 요 소 를 가 져 올 수 있 기 때 문 입 니 다.하위 접근 부모:$parent
<body>
<div id="app">
<mxc></mxc>
</div>
<template id="mxc">
<div> </div>
<button @click="btnClick"> child</button>
</template>
<script>
const app=new Vue({
el:'#app',
data:{
message:' '
},
components:{
mxc:{
template:'#mxc',
methods:{
btnClick(){
console.log(this.$parent)
}
}
}
}
})
</script>
</body>
그림 에서 엘 속성 은 일부 브 라 우 저(또는 vue 플러그 인 추가)에 Vue 가 없 는 것 을 표시 합 니까?
현재 하위 구성 요소 의 부모 구성 요소 가 vue 인 스 턴 스 이기 때 문 입 니 다!
(그러나 실제
$parent사용 하 는 것 이 매우 적다―결합 도 를 고려 한 원인)하위 구성 요소 접근 루트 구성 요소:$root
<body>
<div id="app">
<mxc></mxc>
</div>
<template id="mxc">
<div>
<div> mxc </div>
<cdn></cdn>
</div>
</template>
<template id="mxca">
<div>
<div> </div>
<button @click="btnClick"> child</button>
</div>
</template>
<script>
const app=new Vue({
el:'#app',
data:{
message:' '
},
components:{
mxc:{
template:'#mxc',
data(){
return{
name:' name'
}
},
components:{
cdn:{
template:'#mxca',
methods:{
btnClick(){
console.log(this.$parent.name)
console.log(this.$root.message)
}
}
}
}
}
}
})
</script>
</body>
총결산
vue 부자 구성 요소 간 참조:$parent,$children 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 부자 구성 요소 간 참조:$parent,$children 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
