vue父組件獲取子組件數據詳解

一、使用ref獲取子組件實例

在vue中，可以使用ref屬性來獲取子組件實例，在父組件中訪問子組件的數據和方法。具體過程如下：

<template>
  <div>
    <child ref="myChild" />
    <button @click="getChildData">獲取子組件數據</button>
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  methods: {
    getChildData() {
      const childData = this.$refs.myChild.childData
      console.log(childData)
    }
  }
}
</script>

在上面的代碼中，我們將子組件<child>加上ref="myChild"標籤，父組件就可以使用this.$refs.myChild獲取子組件對象，從而獲取子組件的數據。

二、使用props傳遞數據

使用props來在父子組件間傳遞數據是最常見的方法之一。具體過程如下：

<template>
  <div>
    <child :child-data="parentData" />
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  data() {
    return {
      parentData: 'hello world'
    }
  }
}
</script>

上面的代碼中，將父組件的parentData數據傳遞給子組件的child-data數據。在子組件中可以使用this.childData獲取這個值。

三、使用$emit傳遞數據

父組件也可以使用$emit來觸發子組件中的方法，在這個方法中，子組件可以傳遞數據給父組件。

<template>
  <div>
    <child @childDataEvent="handleChildData" />
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  methods: {
    handleChildData(childData) {
      console.log(childData)
    }
  }
}
</script>

上面的代碼中，在子組件中使用this.$emit('childDataEvent', childData)來觸發父組件的handleChildData方法，並傳遞了childData數據。在父組件中可以使用這個數據處理自己的邏輯。

四、使用provide和inject

在vue2.2.0版本中，提供了一個新的選項provide和注入inject。父組件可以通過provide來提供數據和方法，而子組件可以通過inject來注入這些數據和方法。具體過程如下：

<template>
  <div>
    <child />
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  provide: {
    parentData: 'hello world',
    parentMethod() {
      console.log('parent method')
    }
  }
}
</script>

上面的代碼中，將parentData和parentMethod提供給child子組件。在子組件中，可以這樣使用：

<template>
  <div>
    {{ parentData }}
  </div>
</template>

<script>
export default {
  inject: ['parentData']
}
</script>

使用inject: ['parentData']來將parentData注入到子組件中，並可以直接使用這個變數。

總結

以上是vue父組件獲取子組件數據的幾種方法，每種方法都有其使用場景和優劣。在實際開發中，應根據需求來選擇合適的方法，以達到最佳效果。