Vue는 ref를 사용하여 상위 구성 요소가 하위 구성 요소 인스턴스를 호출하도록 합니다.
- 小云云원래의
- 2018-02-09 11:50:122665검색
상위 구성 요소에 있는 세 개의 버튼은 하위 구성 요소의 세 가지 로드 메서드를 호출하여 다양한 작업을 수행할 수 있습니다. 이 글은 주로 Vue가 ref를 사용하여 상위 컴포넌트가 하위 컴포넌트를 호출하도록 하는 방법을 소개합니다. 필요한 친구가 이를 참조할 수 있기를 바랍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" charset="utf-8"></script>
</head>
<body>
<p id="app">
<loading ref='load'></loading>
<button type="button" @click='show'>显示</button>
<button type="button" @click='hide'>隐藏</button>
<button type="button" @click='changeColor'>变色</button>
</p>
</body>
<script type="text/javascript">
let loading = {
data() {
return {
flag: true
}
},
template: '<p v-show="flag">loading...</p>',
methods: {
hide() {
this.flag = false
},
show() {
this.flag = true
}
}
}
let vm = new Vue({
el: '#app',
components: {
loading
},
methods: {
// 在组件上的ref获取组件实例
// 标签的ref 获得标签的dom
// 使用refs 获取组件实例，然后调用组件的方法即可
hide() {
this.$refs.load.hide()
},
show() {
this.$refs.load.show()
},
changeColor() {
// 获取dom实例 操作样式
this.$refs.load.$el.style.background = 'red'
}
}
})
</script>
</html>관련 권장 사항:
Vue2.0에서 하위 구성 요소를 호출하는 상위 구성 요소의 내부 방법 공유 상위 구성요소와 하위 구성요소 간의 이벤트 방출 및 수신
위 내용은 Vue는 ref를 사용하여 상위 구성 요소가 하위 구성 요소 인스턴스를 호출하도록 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.