回答:
子コンポーネントにa ref
を指定$refs
して、子コンポーネントのメソッドを直接呼び出すために使用します。
html:
<div id="app">
<child-component ref="childComponent"></child-component>
<button @click="click">Click</button>
</div>
javascript:
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);
}
}
})
詳細については、refに関するVueのドキュメントを参照してください。
ref
を作成する代わりに、なぜ使用するのですか? やるべきことはたくさんありますが、ref
それでも安全に使用していますか?ありがとう
ref
安全です。一般に、Vueコミュニティは状態を子供に渡し、イベントを親に戻すことを好むため、推奨されません。一般的に言えば、これはより孤立した、内部的に一貫したコンポーネントにつながります(良いこと™)。ただし、子に渡す情報が実際にイベント(またはコマンド)である場合、状態の変更は適切なパターンではありません。その場合、を使用してメソッドを呼び出すことref
はまったく問題なく、クラッシュすることも何も起こりません。
あなたが説明しているのは、親の状態の変化です。あなたはそれを小道具を介して子供に渡します。あなたが示唆したように、あなたはwatch
その小道具になります。子がアクションを実行すると、を介して親に通知され、親emit
は状態を再び変更する場合があります。
本当に子にイベントを渡したい場合は、バス(単なるVueインスタンス)を作成し、それを子としてpropとして渡すことでそれを行うことができます。
v-model
コンポーネントの短縮形を使用すると、対応するイベントをより少ないコードで発行することで、値を簡単にリセットすることもできます。
prop
子にエクストラを作成し、にエクストラプロパティを作成してからdata
追加するwatch
必要があります。親から子にイベントを転送する組み込みサポートがあった場合は快適です。この状況は頻繁に発生します。
あなたは使用することができる$emit
と$on
。@RoyJコードの使用:
html:
<div id="app">
<my-component></my-component>
<button @click="click">Click</button>
</div>
javascript:
var Child = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
},
created: function() {
this.$parent.$on('update', this.setValue);
}
}
new Vue({
el: '#app',
components: {
'my-component': Child
},
methods: {
click: function() {
this.$emit('update', 7);
}
}
})
時間がある場合は、Vuexストアを使用して変数を監視(別名状態)またはアクションを直接トリガー(別名ディスパッチ)してください。
の間に子でバインディングを使用するイベントバスアプローチは好きではありませんでした。どうして?後続の呼び出し(私はを使用しています)は、メッセージハンドラーを複数回バインドし、メッセージごとに複数の応答を導きます。$on
create
create
vue-router
小道具を親から子に渡し、プロパティウォッチャーを子に入れるという正統的な解決策は、少しうまくいきました。唯一の問題は、子が値の遷移にしか対応できないことです。同じメッセージを複数回渡すには、子が変更を認識できるように、トランジションを強制する何らかの簿記が必要です。
メッセージを配列でラップすると、値が同じであっても常に子ウォッチャーがトリガーされることがわかりました。
親:
{
data: function() {
msgChild: null,
},
methods: {
mMessageDoIt: function() {
this.msgChild = ['doIt'];
}
}
...
}
子:
{
props: ['msgChild'],
watch: {
'msgChild': function(arMsg) {
console.log(arMsg[0]);
}
}
}
HTML:
<parent>
<child v-bind="{ 'msgChild': msgChild }"></child>
</parent>
子コンポーネントのメソッドを呼び出す簡単な分離された方法は、子からハンドラーを発行してから、親からハンドラーを呼び出すことです。
var Child = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue(value) {
this.value = value;
}
},
created() {
this.$emit('handler', this.setValue);
}
}
new Vue({
el: '#app',
components: {
'my-component': Child
},
methods: {
setValueHandler(fn) {
this.setter = fn
},
click() {
this.setter(70)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<my-component @handler="setValueHandler"></my-component>
<button @click="click">Click</button>
</div>
親は子ハンドラー関数を追跡し、必要に応じて呼び出します。
以下の例は自明です。ここで、参照とイベントを使用して、親子の間で関数を呼び出すことができます。
// PARENT
<template>
<parent>
<child
@onChange="childCallBack"
ref="childRef"
:data="moduleData"
/>
<button @click="callChild">Call Method in child</button>
</parent>
</template>
<script>
export default {
methods: {
callChild() {
this.$refs.childRef.childMethod('Hi from parent');
},
childCallBack(message) {
console.log('message from child', message);
}
}
};
</script>
// CHILD
<template>
<child>
<button @click="callParent">Call Parent</button>
</child>
</template>
<script>
export default {
methods: {
callParent() {
this.$emit('onChange', 'hi from child');
},
childMethod(message) {
console.log('message from parent', message);
}
}
}
</script>
親が子のメソッドを使用する必要性について考慮する必要があると思います。実際、親は子のメソッドを考慮する必要はありませんが、子コンポーネントをFSA(有限状態マシン)として扱うことができます。親コンポーネント子コンポーネントの状態を制御するため、ステータスの変化を監視する、または単に計算機能を使用するソリューションで十分です