在vue的框架開發的專案過程中，經常會用到元件來管理不同的功能，有一些公共的元件會被提取出來。這時必然會產生一些疑問和需求？比如乙個元件呼叫另乙個元件作為自己的子元件，那麼我們如何進行給子元件進行傳值呢？如果是電商**系統的開發，還會涉及到購物車的選項，這時候就會涉及到非父子元件傳值的情況。當然你也可以用vuex狀態管理工具來實現，這部分我們後續會單獨介紹。我先給大家介紹vue開發中常用的三種傳值方式。
vue常用的三種傳值方式有：
父傳子子傳父
非父子傳值
引用官網的一句話：父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞。父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息，如下圖所示：
接下來，我們通過例項來看可能會更明白一些：
1. 父元件向子元件進行傳值
父元件：
父元件:
子元件：
子元件:}
2. 子元件向父元件傳值
子元件：
子元件:
}
父元件：
父元件:}
3. 非父子元件進行傳值
非父子元件之間傳值，需要定義個公共的公共例項檔案bus.js，作為中間倉庫來傳值，不然路由元件之間達不到傳值的效果。
公共bus.js
import vue from 'vue'
export default new vue()
元件a：
a元件:
}
元件b：
b元件:}
vue 父傳子，子傳父
父元件向子元件傳值 父 子元件新增行內便簽v bind message orderlistname 之定義傳引數orderlistname 13 子 接受傳值內容props message 父頁面傳值內容，以this.message賦值。父元件 子元件 子元件向父元件傳值 子傳值 傳送傳值內容 th...
vue中父傳子 子傳父 非父子元件傳值
父傳子 通過v bind的形式傳值，子元件通過props接收。子元件的h2標籤中的 在頁面上的展示為world。父元件 home hello div data hr br 子元件 hello h2 div props 子傳父 通過 emit 事件 引數 的方式傳值 子元件 hello handlec...
vue中 的傳值問題 父傳子和子傳父
1 父組件可以使用props 把資料傳給子元件。2 子元件可以使用 emit 觸發父元件的自定義事件。vm.emit event,arg 觸發當前例項上的事件 vm.on event,fn 監聽event事件後執行 fn 引用官網的一句話 父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞 ...