https://blog.csdn.net/qq_41696819/article/details/81431400? ? 文章來源

一.?父組件向子組件傳值

? ? ?1. 使用props建立數(shù)據(jù)通道的渠道

? ? ? ? ? ? ? ?// 這是父組件

? ? ? ? ? ? ? // 這是子組件

? ? ?2 . 在子組件中通過props傳遞過來的數(shù)據(jù)

? ? ? ? ? ? ??Vue,component('child',{

? ? ? ? ? ? ? ? ? ? ? ?props:['message']

? ? ? ? ? ? ? ?})

二.?子組件向父組件傳值

? ? 1. 子組件中需要一個點擊事件觸發(fā)一個自定義事件

Vue.component('son',{

? ? ? ? ? ? methods:{

? ? ? ? ? ? ? ? handleClick(){

? ? ? ? ? ? ? ? // 在相應(yīng)該點擊事件的函數(shù)使用$emit來觸發(fā)一個自定義事件,并傳遞一個參數(shù)

? ? ? ? ? ? ? ? ? ? this.$emit('toFather',123)

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? template:`

這是子組件

? ? ? ? ? ? ? ? ? ? ? ? 發(fā)送給父組件

? ? ? ? ? ? `

? ? ? ? })

? ? ? ?2.?在父組件中的子標簽監(jiān)聽該自定義事件得到傳遞的值

三.?非父子組件傳值

有時候兩個組件也需要傳值(非父子關(guān)系),所以我們需要一個公共的vue來進行傳遞值和獲取值

1 . 創(chuàng)建一個空的vue

// 創(chuàng)建一個空的公共的vue對象

varbus =newVue();

2 . 在組件1中,定義$emit來發(fā)送數(shù)據(jù)

bus.$emit('test','數(shù)據(jù)')

3 . 在組件2中使用$on來接收傳遞的數(shù)據(jù)

bus.$on('test',function(num){

? ? this.getData = num;

//事件的解綁問題

bus.$off("test")

})

當然非父子傳值的方法不只有一種我們也可以使用 localstorage 來傳值和取值

// 在第一個組件中 setItem 設(shè)置值

localstorage.setItem('test','數(shù)據(jù)')

// 在第二個組件中 getItem 獲取值

localStorage.getItem("test");