ホームページ >ウェブフロントエンド >jsチュートリアル >vue で ref を使用して、親コンポーネントが子コンポーネントを呼び出せるようにします。
vue で ref を使用して、親コンポーネントが子コンポーネントを呼び出せるようにします。
- 亚连オリジナル
- 2018-06-06 17:22:202216ブラウズ
この記事では主に、vue が ref を使用して親コンポーネントに子コンポーネントを呼び出す方法を紹介します。必要な友達はそれを参照できます
親コンポーネントの 3 つのボタンは、子コンポーネントのロードの 3 つのメソッドを呼び出して、さまざまな実行を行うことができます。操作
<!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>
以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。
関連記事:
vuexの実装方法の詳細な説明(詳細なチュートリアル) WeChatの友達共有サークルを実装し、vueで友達を送信する方法vue.js 大規模なシングルを構築する方法ページアプリケーション以上がvue で ref を使用して、親コンポーネントが子コンポーネントを呼び出せるようにします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。