Vue.js?中的父子組件通信方式實(shí)例教程

更新時(shí)間：2023年09月27日 09:59:49 作者：stormjun

在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實(shí)現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問(wèn)子組件實(shí)例以及使用 $children 和 $parent 訪問(wèn)父子組件實(shí)例

Vue.js 中的父子組件通信方式

在 Vue.js 中，組件是構(gòu)建應(yīng)用程序的基本單元。當(dāng)我們?cè)趹?yīng)用程序中使用組件時(shí)，組件之間的通信是非常重要的。在 Vue.js 中，父子組件通信是最常見(jiàn)的組件通信方式之一。在本文中，我們將討論 Vue.js 中的父子組件通信方式，并附上代碼實(shí)例。

在這里插入圖片描述

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

Props

props 是 Vue.js 中父組件向子組件傳遞數(shù)據(jù)的一種方式。通過(guò) props，父組件可以向子組件傳遞任何類型的數(shù)據(jù)，包括字符串、數(shù)字、對(duì)象、數(shù)組等等。在子組件中，props 是只讀的，不能直接修改，只能通過(guò)事件的方式向父組件發(fā)送數(shù)據(jù)。

下面是一個(gè)使用 props 傳遞數(shù)據(jù)的示例：

<!-- 父組件 -->
<template>
  <div>
    <my-child :message="parentMessage"></my-child>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  data() {
    return {
      parentMessage: '這是來(lái)自父組件的消息',
    };
  },
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: String,
  },
};
</script>

在上面的示例中，父組件通過(guò) props 將 parentMessage 傳遞給子組件 MyChild ，并將其命名為 message 。在子組件中，我們可以通過(guò) props 對(duì)象來(lái)聲明 message 屬性，然后在模板中使用它來(lái)渲染數(shù)據(jù)。

Sync 修飾符

除了 props 之外，Vue.js 還提供了一個(gè) Sync 修飾符，可以通過(guò)它來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定。Sync 修飾符實(shí)際上是一個(gè)語(yǔ)法糖，它將父組件向子組件傳遞數(shù)據(jù)和子組件向父組件發(fā)送數(shù)據(jù)的操作包裝在一起。

下面是一個(gè)使用 Sync 修飾符的示例：

<!-- 父組件 -->
<template>
  <div>
    <my-child :message.sync="parentMessage"></my-child>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  data() {
    return {
      parentMessage: '這是來(lái)自父組件的消息',
    };
  },
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <input v-model="message" @input="$emit('update:message', message)" />
  </div>
</template>
<script>
export default {
  props: {
    message: String,
  },
};
</script>

在上面的示例中，父組件通過(guò) :message.sync 將 parentMessage 傳遞給子組件 MyChild ，并使用 v-model 指令將子組件的 message 屬性與一個(gè)輸入框進(jìn)行雙向綁定。在子組件中，我們使用 @input 事件將輸入框的值發(fā)送給父組件，實(shí)現(xiàn)雙向數(shù)據(jù)綁定。

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

自定義事件

除了 props 之外，子組件還可以通過(guò)自定義事件向父組件傳遞數(shù)據(jù)。在子組件中，我們可以使用 $emit 方法觸發(fā)一個(gè)自定義事件，并將數(shù)據(jù)作為參數(shù)傳遞給父組件。父組件可以通過(guò) v-on 指令監(jiān)聽(tīng)子組件的自定義事件，并在事件處理函數(shù)中獲取子組件傳遞的數(shù)據(jù)。

下面是一個(gè)使用自定義事件傳遞數(shù)據(jù)的示例：

<!-- 父組件 -->
<template>
  <div>
    <my-child @child-click="handleChildClick"></my-child>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  methods: {
    handleChildClick(data) {
      console.log('從子組件傳遞過(guò)來(lái)的數(shù)據(jù):', data);
    },
  },
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <button @click="handleClick">點(diǎn)擊我向父組件傳遞數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-click', '這是來(lái)自子組件的消息');
    },
  },
};
</script>

在上面的示例中，子組件 MyChild 中定義了一個(gè)按鈕，并在按鈕的 click 事件中觸發(fā)了一個(gè)自定義事件 child-click ，并將數(shù)據(jù) '這是來(lái)自子組件的消息' 作為參數(shù)傳遞給父組件。父組件通過(guò) @child-click 指令監(jiān)聽(tīng)子組件的自定義事件，并在事件處理函數(shù)中打印子組件傳遞的數(shù)據(jù)。

$refs

除了自定義事件之外，子組件還可以通過(guò) $refs 屬性來(lái)訪問(wèn)父組件，從而向父組件傳遞數(shù)據(jù)。在父組件中，我們可以通過(guò) ref 屬性給子組件命名，然后在父組件中通過(guò) $refs 屬性訪問(wèn)子組件實(shí)例，并調(diào)用子組件中的方法或訪問(wèn)子組件中的數(shù)據(jù)。

下面是一個(gè)使用 $refs 傳遞數(shù)據(jù)的示例：

<!-- 父組件 -->
<template>
  <div>
    <my-child ref="child"></my-child>
    <button @click="handleClick">點(diǎn)擊我向子組件傳遞數(shù)據(jù)</button>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  methods: {
    handleClick() {
      this.$refs.child.handleParentClick('這是來(lái)自父組件的消息');
    },
  },
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleParentClick(data) {
      this.message = data;
    },
  },
};
</script>

在上面的示例中，父組件中通過(guò) ref 屬性給子組件命名為 child 。在父組件中，我們通過(guò) $refs.child 訪問(wèn) MyChild 組件實(shí)例，并調(diào)用子組件中的 handleParentClick 方法，將數(shù)據(jù) '這是來(lái)自父組件的消息' 傳遞給子組件。在子組件中，我們將傳遞過(guò)來(lái)的數(shù)據(jù)賦值給 message 屬性，然后在模板中渲染出來(lái)。

父子組件之間的訪問(wèn)

在 Vue.js 中，父組件可以通過(guò) $children 屬性訪問(wèn)它的所有子組件實(shí)例，而子組件可以通過(guò) $parent 屬性訪問(wèn)它的父組件實(shí)例。

下面是一個(gè)示例：

<!-- 父組件 -->
<template>
  <div>
    <my-child></my-child>
    <my-child></my-child>
    <button @click="handleClick">點(diǎn)擊我訪問(wèn)子組件</button>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  methods: {
    handleClick() {
      console.log(this.$children);
    },
  },
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '這是來(lái)自子組件的消息',
    };
  },
  created() {
    console.log(this.$parent);
  },
};
</script>

在上面的示例中，父組件中定義了兩個(gè)子組件 MyChild 。在父組件中，我們通過(guò) $children 屬性訪問(wèn)所有子組件，并在點(diǎn)擊按鈕時(shí)打印所有子組件實(shí)例。在子組件中，我們?cè)?created 鉤子函數(shù)中訪問(wèn)了父組件實(shí)例，并在模板中渲染出了一個(gè)消息。

總結(jié)

在 Vue.js 中，父子組件通信是非常重要的。在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實(shí)現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問(wèn)子組件實(shí)例以及使用 $children 和 $parent 訪問(wèn)父子組件實(shí)例。這些技術(shù)可以幫助我們更好地組織和管理應(yīng)用程序中的組件，并提高組件之間的交互性。

在實(shí)際開(kāi)發(fā)中，我們可以根據(jù)具體的業(yè)務(wù)需求選擇合適的技術(shù)來(lái)實(shí)現(xiàn)父子組件通信。如果需要向子組件傳遞靜態(tài)數(shù)據(jù)，可以使用 props；如果需要實(shí)現(xiàn)雙向數(shù)據(jù)綁定，可以使用 Sync 修飾符；如果需要向父組件傳遞數(shù)據(jù)，可以使用自定義事件；如果需要訪問(wèn)子組件實(shí)例，可以使用 $refs ，如果需要訪問(wèn)父子組件實(shí)例，可以使用 $children 和 $parent 。

在下面的代碼示例中，我們將展示如何使用 props、自定義事件和 $refs 這三種方式實(shí)現(xiàn)父子組件之間的通信。

<!-- 父組件 -->
<template>
  <div>
    <my-child :message="parentMessage" @child-click="handleChildClick" ref="child"></my-child>
    <button @click="handleClick">點(diǎn)擊我向子組件傳遞數(shù)據(jù)</button>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  data() {
    return {
      parentMessage: '這是來(lái)自父組件的消息',
    };
  },
  methods: {
    handleChildClick(data) {
      console.log('從子組件傳遞過(guò)來(lái)的數(shù)據(jù):', data);
    },
    handleClick() {
      this.$refs.child.handleParentClick('這是來(lái)自父組件的消息');
    },
  },
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">點(diǎn)擊我向父組件傳遞數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  props: {
    message: String,
  },
  methods: {
    handleClick() {
      this.$emit('child-click', '這是來(lái)自子組件的消息');
    },
    handleParentClick(data) {
      console.log('從父組件傳遞過(guò)來(lái)的數(shù)據(jù):', data);
    },
  },
};
</script>

在上面的示例中，父組件通過(guò) props 向子組件傳遞數(shù)據(jù)，并在子組件中使用自定義事件向父組件傳遞數(shù)據(jù)。同時(shí)，父組件還使用 $refs 屬性訪問(wèn)子組件實(shí)例，并調(diào)用子組件中的方法，向子組件傳遞數(shù)據(jù)。

到此這篇關(guān)于Vue.js 中的父子組件通信方式的文章就介紹到這了,更多相關(guān)Vue.js 父子組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: