父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介紹了淺談Vue父子組件和非父子組件傳值問題，分享給大家，具體如下：
1.如何創建組件
1.新建一個組件，如：在goods文件夾下新建goodsList.vue
goodsList組件
export default {
data() {
return{}
},
created() {
},
methods: {
},
components:{
}
}
2.在main.js中引入 import goodsList from 'goods/goodsList.vue'
3.在main.js中創建路由對象，創建路由規則
const router = new VerRouter({
routes[
{path:/goods/goodsList,component:goodsList}
]
})
4.在主組件App.vue中設置 商品列表
系統會自動幫我們把這個標簽轉化為a標簽href="#/goods/goodsList" rel="external nofollow"
2.如何在父組件中嵌入子組件
1.新建一個子組件 subcomponent.vue
2.在父組件中引入 import subComponent from '../subComponent/subcomponent.vue'
3.在父組件中注冊 components
export default {
components:{
//如果屬性名和值相同，可以簡寫
subComponent
}
}
4.在父組件指定位置寫一個自定義標簽
3.如何實現父子組件之間的傳值
1.父組件向子組件傳值
1.在子組件中設置props:['commentId'] //子組件用來接收父組件傳遞過來值的屬性名稱
2.在父組件的自定義子組件標簽中設置//父組件傳遞值給子組件
2.子組件向父組件傳值
1.在父組件的自定義標簽中設置一個自定義函數
2.在父組件的methods中聲明函數
getSubComponentParams(params){
//接收來自子組件的參數params
this.myParams = params;
}
3.在子組件中傳遞參數
/**
* 參數1：要觸發的事件名稱
* 參數2：傳遞的值
*/
this.$emit('paramsChange',this.params)
如何實現非父子組件的傳值
非父子組件中兩個組件沒有聯系，不能使用this來傳值，所以我們只能通過第三方的變量，來達到傳值的效果，這個第三方變量就是：
使用一個空的 Vue 實例作為中央事件總線
傳值步驟：
1.創建一個公用js組件 在組件內導出一個空的Vue實例，比如新建一個commonvue.js文件
import Vue from 'vue'
export default new Vue() //es6的寫法
/**
* 相當于下面這樣寫
*
* const bus = new Vue()
* module.exports = bus
*/
2.在組件A中傳遞參數
bus.$emit('goodsCount',this.myCount)
3.在組件B中接收參數
bus.$on('goodsCount',(goodsCount)=>{
const oldVal = $("#badgeId").text()
const lastVal = parseInt(oldVal) + goodsCount
console.log(lastVal)
$("#badgeId").text(lastVal)
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。
本文標題: 淺談Vue父子組件和非父子組件傳值問題
本文地址: http://www.cppcns.com/ruanjian/java/200804.html
總結
以上是生活随笔為你收集整理的父子组建传值_浅谈Vue父子组件和非父子组件传值问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： native html5 区别,H5与N
- 下一篇： 文本界面安装linux 7,安装 Cen