這篇文章主要為大家展示了“Vue如何實(shí)現(xiàn)父子組件之間的通信功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue如何實(shí)現(xiàn)父子組件之間的通信功能”這篇文章吧。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計(jì),開平網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:開平等地區(qū)。開平做網(wǎng)站價(jià)格咨詢:18980820575

在vue組件通信中其中最常見通信方式就是父子組件之中的通信，而父子組件的設(shè)定方式在不同情況下又各有不同。最常見的就是父組件為控制組件子組件為視圖組件。父組件傳遞數(shù)據(jù)給子組件使用，遇到業(yè)務(wù)邏輯操作時(shí)子組件觸發(fā)父組件的自定義事件。無論哪種組織方式父子組件的通信方式都是大同小異。

一、父組件到子組件通訊

父組件到子組件的通訊主要為：子組件接受使用父組件的數(shù)據(jù)，這里的數(shù)據(jù)包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。vue提倡單項(xiàng)數(shù)據(jù)流，因此在通常情況下都是父組件傳遞數(shù)據(jù)給子組件使用，子組件觸發(fā)父組件的事件，并傳遞給父組件所需要的參數(shù)。

1、通過props傳遞數(shù)據(jù)

父子通訊中最常見的數(shù)據(jù)傳遞方式就是通過props傳遞數(shù)據(jù)，就好像方法的傳參一樣，父組件調(diào)用子組件并傳入數(shù)據(jù)，子組件接受到父組件傳遞的數(shù)據(jù)進(jìn)行驗(yàn)證使用。

<!--父組件-->
 <template>
  <div>
   <h3>父組件</h3>
   <br>
   <Child-one :parentMessage="parentMessage"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
 
  export default{
   components: {
    ChildOne,
   },
   data() {
    return {
     parentMessage: '我是來自父組件的消息',
    };
   },
  };
 </script>
 <style scoped>
 </style>

 <!--子組件-->
 <template>
  <div>
   <h4>我是子組件一</h4>
   <span>{{parentMessage}}</span>
  </div>
 </template>
 <script>
  export default{
   props: ['parentMessage'],
  };
 </script>
 <style scoped>
 </style>

props可以接受function,所以function也可以以這種方式傳遞到子組件使用。

2、通過$on傳遞父組件方法

通過$on傳遞父組件方法是組件通信中常用的方法傳遞方式。它可以與通過props傳遞方法達(dá)到相同的效果。相比于props傳遞function,它更加的直觀和顯示的表現(xiàn)出了調(diào)用關(guān)系。

<!--父組件-->
 <template>
  <div>
   <h3>父組件</h3>
   <br>
   <Child-one @childEvent="parentMethod"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
 
  export default{
   components: {
    ChildOne,
   },
   data() {
    return {
     parentMessage: '我是來自父組件的消息',
    };
   },
   methods: {
    parentMethod() {
     alert(this.parentMessage);
    },
   },
  };
 </script>
 <style scoped>
 </style>

 <!--子組件-->
 <template>
  <div>
   <h4>我是子組件一</h4>
  </div>
 </template>
 <script>
  export default{
   mounted() {
    this.$emit('childEvent');
   },
  };
 </script>
 <style scoped>
 </style>

3、獲取父組件然后使用父組件中的數(shù)據(jù)（不推薦）

準(zhǔn)確來說這種方式并不屬于數(shù)據(jù)的傳遞而是一種主動(dòng)的查找。父組件并沒有主動(dòng)的傳遞數(shù)據(jù)給子組件，而是子組件通過與父組件的關(guān)聯(lián)關(guān)系，獲取了父組件的數(shù)據(jù)。

 該方法雖然能實(shí)現(xiàn)獲取父組件中的數(shù)據(jù)但是不推薦這種方式，因?yàn)関ue提倡單向數(shù)據(jù)流，只有父組件交給子組件的數(shù)據(jù)子組件才有使用的權(quán)限，不允許子組件私自獲取父組件的數(shù)據(jù)進(jìn)行使用。在父與子的關(guān)系中子應(yīng)當(dāng)是處于一種被動(dòng)關(guān)系。

 this.$parent

此處的this為子組件實(shí)例

二、子組件到父組件通訊

子組件到父組件的通訊主要為父組件如何接受子組件之中的數(shù)據(jù)。這里的數(shù)據(jù)包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。

1、通過$emit傳遞父組件數(shù)據(jù)

與父組件到子組件通訊中的$on配套使用，可以向父組件中觸發(fā)的方法傳遞參數(shù)供父組件使用。

<!--父組件-->
 <template>
  <div>
   <h3>父組件</h3>
  <br>
   <Child-one @childEvent="parentMethod"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
  export default{
   components: {
    ChildOne,
   },
   data() {
    return {
     parentMessage: '我是來自父組件的消息',
    };
   },
   methods: {
    parentMethod({ name, age }) {
     console.log(this.parentMessage, name, age);
    },
   },
  };
 </script>
 <style scoped>
 </style>

 <!--子組件-->
 <template>
  <div>
   <h4>我是子組件一</h4>
  </div>
 </template>
 <script>
  export default{
   mounted() {
    this.$emit('childEvent', { name: 'zhangsan', age: 10 });
   },
  };
 </script>
 <style scoped>
 </style>

2、refs獲取

可以通過在子組件添加ref屬性，然后可以通過ref屬性名稱獲取到子組件的實(shí)例。準(zhǔn)確來說這種方式和this.$parent一樣并不屬于數(shù)據(jù)的傳遞而是一種主動(dòng)的查找。

 盡量避免使用這種方式。因?yàn)樵诟缸咏M件通信的過程中。父組件是處于高位是擁有控制權(quán)，而子組件在多數(shù)情況下應(yīng)該為純視圖組件，只負(fù)責(zé)視圖的展示和自身視圖的邏輯操作。對外交互的權(quán)利應(yīng)該由父組件來控制。所以應(yīng)當(dāng)由父組件傳遞視圖數(shù)據(jù)給子組件，子組件負(fù)責(zé)展示。而子組件的對外交互通過$emit觸發(fā)父組件中相應(yīng)的方法，再由父組件處理相應(yīng)邏輯。

<template>
  <div>
   <h3>父組件</h3>
   <br>
   <Child-one ref="child"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
  export default{
   components: {
    ChildOne,
   },
   mounted(){
    console.log(this.$refs['child']);
   },
  };
 </script>
 <style scoped>
 </style>

 this.$refs['child']

以上是“Vue如何實(shí)現(xiàn)父子組件之間的通信功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：Vue如何實(shí)現(xiàn)父子組件之間的通信功能
文章轉(zhuǎn)載：http://aaarwkj.com/article16/gpisdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、、App開發(fā)、網(wǎng)站制作、網(wǎng)站營銷、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)