Vue 형제 구성 요소 통신 방법(Vuex 사용 하지 않 음)
4600 단어 Vue형제.커 뮤 니 케 이 션
간단 한 인 스 턴 스:우 리 는 a 구성 요소 에서 단 추 를 누 르 면 b 구성 요소 에 정 보 를 전달 하여 b 구성 요 소 를 팝 업 시 킵 니 다.
주요 한 사 고 는 먼저 아들 을 아버지 에 게 전하 고 아버지 에서 아들 을 전 하 는 것 이다.
우선 a.vue 구성 요소 에서 버튼 botton 에 handleClick 이 벤트 를 연결 합 니 다.이벤트 에서 우 리 는 this.$emit()방법 을 통 해 사용자 정의 이 벤트 를 실행 하고 인 자 를 전달 합 니 다.
예제 에서 우 리 는 this.$emit()를 통 해 isLogFn 이라는 방법 으로 이 벤트 를 사용자 정의 하고 log 인 자 를 전달 합 니 다.
a.vue
<template>
<div class="adiv">
<p>a </p>
<button type="button" v-on:click="handleClick"> b </button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('isLogFn','log')
}
}
}
</script>
<style>
.adiv{
width: 400px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
예시 에서,
여기까지 만 해도 전체 과정 이 끝나 지 않 고 절반 만 완성 했다.다음은 부자 구성 요소 의 값 을 완성 하고 a 구성 요소 의 정 보 를 b 구성 요소 에 전달 해 야 합 니 다.
App.vue
<template>
<div id="app">
<aPage @isLogFn = "lisLogFn"></aPage>
<bPage :isLog = "login"></bPage>
</div>
</template>
<script>
import aPage from './components/a.vue'
import bPage from './components/b.vue'
export default {
data () {
return {
login: 'false'
}
},
name: 'app',
components: {
aPage,
bPage
},
methods: {
lisLogFn (data) {
if (data == 'log') {
this.login = 'true'
}
}
}
}
</script>
<style>
</style>
명심 하 세 요!이 props 를 직접 사용 할 수 없습니다.반드시 computed 처 리 를 거 쳐 야 합 니 다.이 유 는 vue 공식 설명 을 참조 합 니 다.
단 방향 데이터 흐름
b.vue
<template>
<div class="bdiv" v-show="isLogin"> B </div>
</template>
<script>
export default {
props: ['isLog'],
data () {
return {
}
},
computed: {
isLogin () {
if(this.isLog == 'true'){
return true
} else {
return false
}
}
}
}
</script>
<style>
.bdiv{
width: 200px;
height: 200px;
border: 1px #000 solid;
margin: 0 auto;
}
</style>
자부:
4
4
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
