vue子元件怎麼向父元件傳值

vue子元件向父元件傳值的方法：1、子元件主動觸發事件將資料傳遞給父元件。2、子元件中繫結ref，且定義一個父元件可直接呼叫的函式，父元件註冊子元件後繫結ref，呼叫子元件的函式獲取資料。

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

一，子元件主動觸發事件將資料傳遞給父元件

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，子元件中繫結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子元件怎麼向父元件傳值的詳細內容，更多請關注php中文網其它相關文章！