コンテクスト
Vue 2.0ではドキュメントとその他親から子へのコミュニケーションは小道具を介して行われることを明確に示します。
質問
親は小道具を使って、どのようにして子供に出来事が起こったことを伝えるのでしょうか?
イベントと呼ばれるプロパティを監視するだけでよいのでしょうか? それは適切ではないようです。代替案も同様です ( $emit/$onは子から親へのもので、ハブ モデルは離れた要素用です)。
例
親コンテナがあり、その子コンテナに API で特定のアクションを実行しても問題ないことを伝える必要があります。関数をトリガーできる必要があります。
ベストアンサー1
Vue 3 コンポジション API
子コンポーネントの を作成しref、それをテンプレートに割り当て、 を使用して<ref>.value子コンポーネントを直接呼び出します。
<script setup>
import {ref} from 'vue';
const childComponentRef = ref(null);
function click() {
// `childComponentRef.value` accesses the component instance
childComponentRef.value.doSomething(2.0);
}
</script>
<template>
<div>
<child-component ref="childComponentRef" />
<button @click="click">Click me</button>
</div>
</template>
注意すべき点がいくつかあります。
- 子コンポーネントが を使用している場合は、（上記のような）
<script setup>パブリックメソッドを宣言する必要があります。doSomethingdefineExpose。 - Typescriptを使用している場合、注釈を付ける方法の詳細はここ。
Vue 3 オプション API / Vue 2
子コンポーネントに を指定しref、それ$refsを使用して子コンポーネントのメソッドを直接呼び出します。
html:
<div id="app">
<child-component ref="childComponent"></child-component>
<button @click="click">Click</button>
</div>
ジャバスクリプト:
var ChildComponent = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
}
}
new Vue({
el: '#app',
components: {
'child-component': ChildComponent
},
methods: {
click: function() {
this.$refs.childComponent.setValue(2.0);
}
}
})
詳細については、コンポーネント参照に関する Vue 3 ドキュメントまたはrefs に関する Vue 2 ドキュメント。