Vue組件通信傳遞數據的三種方式

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

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

Vue傳值

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

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

以下是一些關于Vue中props和$emit的常用概念：

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

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

傳遞數據的三種方式

方式一

通過父組件給子組件綁定一個自定義事件實現：子給父傳數據（使用@或v-on）

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

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

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

<template>
   <div class="parent">
     <p>父組件接手到的內容：{{ value}}</p>
     <Son  @son="getValue"></Son> 
      <!-- 監(jiān)聽子組件觸發(fā)的自定義事件事件,然后調用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實現：子給父傳遞數據

子組件：

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

父組件：

<template>
   <div class="parent">
     <p>父組件接手到的內容：{{ 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:'子傳父的內容'
     }
   },
   methods:{
     setValue(){
       this.$emit('son',this.value)//觸發(fā)transfer方法，this.value為向父組件傳遞的數據
     }
   }
 }
 </script>

父組件：

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

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

您可能感興趣的文章: