vue サブコンポーネントが親コンポーネントに値を渡すためのメソッド: 1. サブコンポーネントは、親コンポーネントにデータを渡すイベントをアクティブにトリガーします。 2. サブコンポーネントに ref をバインドし、親コンポーネントが直接呼び出せる関数を定義します。親コンポーネントはサブコンポーネントを登録し、ref をバインドしてサブコンポーネントの関数を呼び出してデータを取得します。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
1. 子コンポーネントはイベントをアクティブにトリガーし、データを親コンポーネントに渡します
1. イベントと、イベントによってトリガーされる関数を子にバインドしますコンポーネント
サブコンポーネントコード
<template> <div> <Tree :data="treeData" show-checkbox ref="treeData"></Tree> <Button type="success" @click="submit"></Button> </div> </template>
イベントがサブコンポーネントでトリガーする関数
submit(){ this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes()); },
2、トリガーとなるイベントを親コンポーネントにバインドします
<AuthTree @getTreeData='testData'> </AuthTree>
親コンポーネントが関数表示をトリガーする サブコンポーネントによって渡されるデータ
testData(data){ console.log("parent"); console.log(data) },
コンソールによって出力されるデータ
次に、イベントをトリガーする必要はありません。サブコンポーネント内 (ボタンのクリック、create() イベントなど)
この方法ははるかに簡単です。
1、bind ref
<template> <div> <Tree :data="treeData" show-checkbox ref="treeData"></Tree> </div> </template>
を入力し、子コンポーネントで関数を定義します。この関数は親コンポーネントから直接呼び出すことができます。関数の戻り値は、必要なデータとして定義されます。
getData(){ return this.$refs.treeData.getCheckedNodes() },
次に、サブコンポーネントを親コンポーネントに登録し、ref をバインドして、サブコンポーネントの関数を呼び出してデータを取得します。
<AuthTree ref="authTree"> </AuthTree>
親コンポーネントの関数呼び出し
console.log( this.$refs.authTree.getData());
関連する推奨事項:《vue.js チュートリアル》
以上がvueサブコンポーネントから親コンポーネントに値を渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。