>  기사  >  웹 프론트엔드  >  vue를 사용하여 버튼을 클릭하여 패널을 밀어냅니다.

vue를 사용하여 버튼을 클릭하여 패널을 밀어냅니다.

不言
不言원래의
2018-06-29 17:23:293237검색

이 글에서는 Vue를 사용하여 버튼을 클릭하여 패널을 밀어내는 구현 코드를 주로 소개합니다. 매우 좋고 참고할만한 가치가 있습니다.

의사소통 중에 실수를 하기 쉽습니다. 또는 정보가 전혀 전달되지 않습니다. 그럼 컴포넌트 간 통신을 통해 클릭 이벤트를 완료하는 방법에 대한 예를 살펴보겠습니다.

index.vue 파일에서:

<p>
   <el-button type="primary" @click="onShow">点我</el-button>
</p>

Transfer intermediary

<addForm :show="formShow" @onHide="formShow = false"></addForm>

팝업할 컴포넌트인 컴포넌트 소개

import addForm from &#39;./docsForm&#39;
export default {
components: {
addForm
},
data() {
return {
show: false,
formShow: false
}
},
watch: {
 show: {
      handler: function(newVal, oldVal) {
        this.show = newVal
      },
      deep: true
    }
},
methods: {
onShow() {
      this.formShow = true
    }
}
}
#🎜 🎜#이 파일의 메소드는 이렇습니다.

그런 다음 팝업 구성 요소 docsForm.vue가 팝업 사이의 볼륨에 데이터를 업로드합니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue새로 고침 없이 정방향 새로 고침 및 역방향 새로 고침의 효과를 얻는 방법

#🎜🎜 ## 🎜🎜#Vue.js 2.0 모바일 단말기에서 사진 촬영 시 압축 이미지 업로드 미리보기 기능 구현


Vue는 맨 위로 돌아가기 backToTop

#🎜 🎜#

위 내용은 vue를 사용하여 버튼을 클릭하여 패널을 밀어냅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.