vue-cli 兄弟组件传参、父子组件传参

一、兄弟组件传参

1.新建js文件（命名可随意）

import Vue from 'vue'

export default new Vue;

2.在需要调用的页面引入（有几个页面需要使用就几个页面引入）

import bus from '../../utils/transferValue'

3.传值页面代码
$emit(‘方法名’,‘传值’)
注：方法名两边需对应

bus.$emit('方法','purchasingDemand')

4.接受传值页面代码
$on(‘方法名’,data=>{ })
注：data即为传过来的参数

bus.$on('transfer',data=>{
      tconsole.log(data)
    })

二、父子组件传参

父传子

1.创建子组件名称为tabbar.vue
2.在页面引入子组件

import tabbar from "../components/tabbar.vue";

3.父组件使用子组件
parone和partwo是传给子组件页面的参数

 <tabbar v-bind:parone="value1" :partwo="value2"></tabbar>

4.子组件接收参数

props:['parone','partwo'],
   created() {
      console.log(this.parone,this.partwo)
  }

子传父
1.子页面tabbar.vue 定义方法

<p style="color: red;" @click="toParent">点击传到父级</p>

$emit(‘方法名’,传值)

 toParent(){
        this.$emit('fromChild', this.title)
    },

2.父组件页面定义方法
@方法名（为上面定义的方法名）

<tabbar @fromChild="getChild"></tabbar>

方法名(传值)

	getChild(param){
    	console.log(param)
 	},