vue 부모 구성 요 소 는 하위 구성 요소 이벤트 의 인 스 턴 스 설명 을 누 르 십시오.
하위 구성 요소 에 인용 정 보 를 등록 합 니 다홈 페이지이렇게 설명 합 니 다.
ref 는 요소 나 하위 구성 요소 에 인용 정 보 를 등록 하 는 데 사 용 됩 니 다.인용 정 보 는 부모 구성 요소 의$refs 대상 에 등 록 됩 니 다.일반적인 DOM 요소 에 사용 하면 인용 이 가리 키 는 것 은 DOM 요소 입 니 다.하위 구성 요소 에 사용 하면 구성 요소 인 스 턴 스 를 참조 합 니 다.
부모 구성 요소 app.vue
<template>
<div id="app">
<!-- -->
<input v-model="msg">
<button v-on:click="notify"> </button>
<!-- -->
<popup ref="child" ></popup>
</div>
</template>
<script>
import popup from '@/components/popup'
export default {
name: 'app',
data: function () {
return {
msg: ''
}
},
components: {
popup
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$refs.child.parentMsg(this.msg)
}
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div>
<ul>
<li v-for="item in messages"> ：{{item}}</li>
</ul>
</div>
</template>
<style>
body {
background-color: #ffffff;
}
</style>
<script>
export default{
name: 'popup',
data: function () {
return {
messages: []
}
},
methods: {
parentMsg: function (msg) {
this.messages.push(msg)
}
}
}
</script>1.부모 구성 요소 의 button 요소 바 인 딩 click 이벤트,이 이 벤트 는 notify 방법 을 가리 키 고 있 습 니 다.
2.하위 구성 요소 에 ref="child"를 등록 합 니 다.
3.부모 구성 요소 의 notify 방법 은 처리 할 때$refs.child 를 사용 하여 하위 구성 요소 에 이 벤트 를 전달 하 는 parentMsg 방법 과 부모 구성 요소 의 인자 msg 를 가지 고 있 습 니 다.
4.하위 구성 요소 가 부모 구성 요소 의 이 벤트 를 받 은 후 parentMsg 방법 을 호출 하여 받 은 msg 를 message 배열 에 넣 었 습 니 다.
실행 결 과 는 다음 과 같 습 니 다.
이 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
