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"
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)
})
