本文介紹了淺談Vue父子組件和非父子組件傳值問題，分享給大家，具體如下：
1.如何創建組件
1.新建一個組件，如：在goods文件夾下新建goodsList.vue
<template>
<div class='tmpl'>
goodsList組件
</div>
</template>
<style>
</style>
<script>
export default {
data() {
return{}
},
created() {
},
methods: {
},
components:{
}
}
</script>
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中設置 <router-link to="/goods/goodsList">商品列表</router-link>
系統會自動幫我們把這個標簽轉化為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.在父組件指定位置寫一個自定義標簽<subComponent></subComponent>
3.如何實現父子組件之間的傳值
1.父組件向子組件傳值
1.在子組件中設置props:['commentId'] //子組件用來接收父組件傳遞過來值的屬性名稱
2.在父組件的自定義子組件標簽中設置<subComponent :commentId="this.$route.params.photoId"></subComponent>//父組件傳遞值給子組件
2.子組件向父組件傳值
1.在父組件的自定義標簽中設置一個自定義函數<subComponent v-on:paramsChange="getSubComponentParams"></subComponent>
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)
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
