Vue組件通信傳遞數(shù)據(jù)的三種方式

更新時(shí)間：2023年04月21日 10:19:07 作者：Wen先森

這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

Vue傳值

Vue.js是一個(gè)組件化的前端開發(fā)框架，支持父子組件之間的消息傳遞和數(shù)據(jù)通信。子組件向父組件傳遞消息的過程稱為“子傳父”或“props down，events up”。

具體而言，在Vue.js中，每個(gè)組件都可以看作是一個(gè)獨(dú)立的實(shí)例，它們之間可以通過特定的Props和Events屬性進(jìn)行雙向綁定和通信。子組件在初始化時(shí)可以接收來自父組件的數(shù)據(jù)，并通過props屬性綁定這些數(shù)據(jù)。當(dāng)子組件需要向父組件發(fā)送事件或數(shù)據(jù)時(shí)，可以使用$emit方法觸發(fā)相應(yīng)的事件，然后由父組件定義的v-on指令監(jiān)聽并執(zhí)行相應(yīng)的操作。

以下是一些關(guān)于Vue中props和$emit的常用概念：

props：在父組件中通過屬性的方式向子組件傳遞數(shù)據(jù)或方法，子組件中可以通過props屬性來獲取相關(guān)數(shù)據(jù)或方法，從而實(shí)現(xiàn)父子組件之間的信息共享。
emit：在子組件中通過emit觸發(fā)自定義事件，并攜帶需要傳遞的數(shù)據(jù)，父組件可以通過v-on監(jiān)聽到這些事件，然后執(zhí)行相應(yīng)的操作進(jìn)行響應(yīng)。
sync修飾符：可以簡(jiǎn)化子組件向父組件派發(fā)事件的過程，添加.sync修飾符后，在父組件中更新子組件的狀態(tài)時(shí)，無需手動(dòng)監(jiān)聽子組件觸發(fā)的事件，而是可以直接通過v-model語法糖進(jìn)行處理，簡(jiǎn)單來說就是對(duì)一個(gè)prop進(jìn)行雙向綁定。

總之，“子傳父”是Vue中非常重要的一個(gè)概念，它可以幫助我們更好地維護(hù)組件間的數(shù)據(jù)和功能的分離，同時(shí)也能提高程序的可讀性和可維護(hù)性。對(duì)于在實(shí)際開發(fā)過程中遇到的“子傳父”的問題，需要按照Vue框架的規(guī)范和約定來解決問題。

傳遞數(shù)據(jù)的三種方式

方式一

通過父組件給子組件綁定一個(gè)自定義事件實(shí)現(xiàn)：子給父?jìng)鲾?shù)據(jù)（使用@或v-on）

子組件：通過$emit觸發(fā)父組件上的自定義事件，發(fā)送參數(shù)

<template>
   <div class="son">
     <button @click="setValue">子傳值</button>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       value:'子傳父的內(nèi)容'
     }
   },
   methods:{
     setValue(){
       this.$emit('son',this.value)//觸發(fā)transfer方法，this.value為向父組件傳遞的數(shù)據(jù)
     }
   }
 }
 </script>

父組件：通過綁定自定義事件，接受子組件傳遞過來的參數(shù)

<template>
   <div class="parent">
     <p>父組件接手到的內(nèi)容：{{ value}}</p>
     <Son  @son="getValue"></Son> 
      <!-- 監(jiān)聽子組件觸發(fā)的自定義事件事件,然后調(diào)用getValue方法 -->
   </div>
 </template>
 <script>
 import son from './Son'
 export default {
   name: 'parent',
   data () {
     return {
       msg: '父組件',
       value:'',
     }
   },
   components:{son},
   methods:{
     getValue(value){
       this.value= value
     }
   }
 }
 </script>

方式二

props實(shí)現(xiàn)：子給父?jìng)鬟f數(shù)據(jù)

子組件：

<template>
   <div class="son">
     <button @click="setValue">子傳值</button>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   props: ['getValue']，
   data(){
     return {
       value:'子傳父的內(nèi)容'
     }
   },
   methods:{
     setValue(){
       this.getValue('son',this.value)//this.value為向父組件傳遞的數(shù)據(jù)
     }
   }
 }
 </script>

父組件：

<template>
   <div class="parent">
     <p>父組件接手到的內(nèi)容：{{ value}}</p>
     <Son  :getValue="getValue"></Son> 
   </div>
 </template>
 <script>
 import son from './Son'
 export default {
   name: 'parent',
   data () {
     return {
       msg: '父組件',
       value:'',
     }
   },
   components:{son},
   methods:{
     getValue(value){
       this.value= value
     }
   }
 }
 </script>

方式三

使用ref

子組件：

<template>
   <div class="son">
     <button @click="setValue">子傳值</button>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       value:'子傳父的內(nèi)容'
     }
   },
   methods:{
     setValue(){
       this.$emit('son',this.value)//觸發(fā)transfer方法，this.value為向父組件傳遞的數(shù)據(jù)
     }
   }
 }
 </script>

父組件：

<template>
   <div class="parent">
     <p>父組件接手到的內(nèi)容：{{ value}}</p>
     <Son  ref="son" ></Son> 
      <!-- 監(jiān)聽子組件觸發(fā)的自定義事件事件,然后調(diào)用getValue方法 -->
   </div>
 </template>
 <script>
 import son from './Son'
 export default {
   name: 'parent',
   data () {
     return {
       msg: '父組件',
       value:'',
     }
   },
   components:{son},
    mounted(){
      setTimeout(() =>{
        // 函數(shù)體
        this.$refs.son.$on('son', this.getValue)
      }, 3000)
   },  
   methods:{
     getValue(value){
       this.value= value
     }
   }
 }
 </script>

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

您可能感興趣的文章: