本文介紹了淺談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 */