vue中父組件和子組件怎么通訊

這篇文章主要介紹“vue中父組件和子組件怎么通訊”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue中父組件和子組件怎么通訊”文章能幫助大家解決問題。

一、單向數(shù)據(jù)流

在 Vue.js 中，父組件向子組件傳遞數(shù)據(jù)一般采用單向數(shù)據(jù)流的方式，即父組件通過 props 屬性向子組件傳遞數(shù)據(jù)，而子組件不能直接修改這些數(shù)據(jù)。

父組件通過在子組件上定義 props 屬性來傳遞數(shù)據(jù)，如下所示：

<template>
  <div>
    <!-- 父組件向子組件傳遞 count 數(shù)據(jù) -->
    <child-component :count="count"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

在子組件中通過 props 來接收父組件傳遞的數(shù)據(jù)，如下所示：

<template>
  <div>
    <!-- 子組件通過 props 接收 count 數(shù)據(jù) -->
    <div>count: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

這樣就完成了父組件向子組件傳遞數(shù)據(jù)的過程，子組件可以使用接收到的數(shù)據(jù)進(jìn)行渲染操作，但是不能直接修改這些數(shù)據(jù)。

二、子組件向父組件傳遞數(shù)據(jù)

在 Vue.js 中，子組件向父組件傳遞數(shù)據(jù)需要通過自定義事件的方式來實(shí)現(xiàn)。子組件通過 $emit 方法觸發(fā)事件，父組件則通過在子組件上添加 v-on 指令綁定事件進(jìn)行監(jiān)聽。

例如，子組件中定義一個(gè)按鈕，點(diǎn)擊按鈕時(shí)觸發(fā)事件并通過 $emit 方法向父組件傳遞數(shù)據(jù)，如下所示：

<template>
  <div>
    <button @click="sendData">傳遞數(shù)據(jù)</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData () {
      // 通過 $emit 方法觸發(fā)事件，并傳遞數(shù)據(jù)
      this.$emit('send-data', '這是子組件傳遞的數(shù)據(jù)')
    }
  }
}
</script>

在父組件中，使用 v-on 指令綁定事件，監(jiān)聽子組件觸發(fā)的事件，并接收子組件傳遞的數(shù)據(jù)，如下所示：

<template>
  <div>
    <!-- 綁定子組件事件，監(jiān)聽子組件觸發(fā)的事件 -->
    <child-component @send-data="getData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData (msg) {
      console.log(msg) // 打印子組件傳遞的數(shù)據(jù)
    }
  }
}
</script>

這樣就完成了子組件向父組件傳遞數(shù)據(jù)的過程，子組件通過 $emit 方法觸發(fā)事件并傳遞數(shù)據(jù)，父組件則通過 v-on 指令綁定事件進(jìn)行監(jiān)聽并接收子組件傳遞的數(shù)據(jù)。

三、使用 $parent 和 $children 屬性

除了以上兩種方式之外，Vue.js 還提供了 $parent 和 $children 兩個(gè)屬性來實(shí)現(xiàn)父子組件之間的通訊。使用 $parent 屬性可以在子組件中訪問父組件的數(shù)據(jù)和方法，使用 $children 屬性可以在父組件中訪問子組件的數(shù)據(jù)和方法。

例如，在子組件中訪問父組件的數(shù)據(jù)和方法，如下所示：

<template>
  <div>
    <button @click="getParentData">獲取父組件的數(shù)據(jù)</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParentData () {
      // 使用 $parent 屬性訪問父組件的數(shù)據(jù)和方法
      console.log(this.$parent.count) // 訪問父組件的 count 數(shù)據(jù)
      this.$parent.sayHello() // 調(diào)用父組件的 sayHello 方法
    }
  }
}
</script>

在父組件中訪問子組件的數(shù)據(jù)和方法，則可以使用 $children 屬性，如下所示：

<template>
  <div>
    <button @click="getChildData">獲取子組件的數(shù)據(jù)</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData () {
      // 使用 $children 屬性訪問子組件的數(shù)據(jù)和方法
      console.log(this.$children[0].count) // 訪問第一個(gè)子組件的 count 數(shù)據(jù)
      this.$children[0].sayHello() // 調(diào)用第一個(gè)子組件的 sayHello 方法
    }
  }
}
</script>

不過，使用 $parent 和 $children 屬性進(jìn)行父子組件之間的通訊，不太符合 Vue.js 的組件通訊原則，不建議經(jīng)常使用。因?yàn)檫@種方式會(huì)讓子組件和父組件緊密耦合，使得代碼的擴(kuò)展和維護(hù)變得困難。

關(guān)于“vue中父組件和子組件怎么通訊”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。