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

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=&#39;testData&#39;>
</AuthTree>

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

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

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

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

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

1、bind ref

<template>
<div>
<tree></tree>
</div>
  
</template>

サブコンポーネントで

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

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

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

<authtree>
          </authtree>

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

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

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

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