vueサブコンポーネントから親コンポーネントに値を渡す方法

vue サブコンポーネントが親コンポーネントに値を渡すためのメソッド: 1. サブコンポーネントは、親コンポーネントにデータを渡すイベントをアクティブにトリガーします。 2. サブコンポーネントに ref をバインドし、親コンポーネントが直接呼び出せる関数を定義します。親コンポーネントはサブコンポーネントを登録し、ref をバインドしてサブコンポーネントの関数を呼び出してデータを取得します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

1. 子コンポーネントはイベントをアクティブにトリガーし、データを親コンポーネントに渡します

1. イベントと、イベントによってトリガーされる関数を子にバインドしますコンポーネント

サブコンポーネントコード

イベントがサブコンポーネントでトリガーする関数

submit(){ this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes()); },

2、トリガーとなるイベントを親コンポーネントにバインドします

親コンポーネントが関数表示をトリガーする サブコンポーネントによって渡されるデータ

testData(data){ console.log("parent"); console.log(data) },

コンソールによって出力されるデータ

次に、イベントをトリガーする必要はありません。サブコンポーネント内 (ボタンのクリック、create() イベントなど)

この方法ははるかに簡単です。

1、bind ref

を入力し、子コンポーネントで関数を定義します。この関数は親コンポーネントから直接呼び出すことができます。関数の戻り値は、必要なデータとして定義されます。

getData(){ return this.$refs.treeData.getCheckedNodes() },

次に、サブコンポーネントを親コンポーネントに登録し、ref をバインドして、サブコンポーネントの関数を呼び出してデータを取得します。

親コンポーネントの関数呼び出し

console.log( this.$refs.authTree.getData());

関連する推奨事項:《vue.js チュートリアル》

以上がvueサブコンポーネントから親コンポーネントに値を渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。