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=&#39;testData&#39;>
</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.js教程》

以上是vue子元件怎麼傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！