兄弟组件传值
创建3个文件

1：bus，公交JS文件

2：哥哥组件

3：弟弟组件
bus.js代码
import Vue from 'vue'

export default new Vue()


哥哥组件代码：
<template>
 <div id="gege">
 <top title="兄弟组件"></top>
  <p>这里是哥哥组件</p>
  <p>这个是哥哥的数据----{{txt}}</p>
  <button @click="btn()" class="btn">发送数据</button>
  <didi></didi>
 </div>
</template>

<script>
import bus from '../bus.js'
import didi from './didi.vue'
export default{
  name:'gege',
  data(){
    return{
      txt:'哥哥的数据内容'
    }
  },
  methods:{
  btn(){
    bus.$emit('data',this.txt)
  }
  },
  components:{didi}
}
</script>

<style>
</style>


弟弟组件代码:
<template>
 <div id="didi">
  <p>这里是弟弟组件</p>
  <p>这个是弟弟的默认数据----{{msg}}</p>
 </div>
</template>

<script>
import bus from '../bus.js'
export default{
  name:'didi',
  data(){
    return{
      msg:'默认值'
    }
  },
   mounted(){
    bus.$on('data',(msg)=>{
      this.msg=msg
      console.log(msg)
    })

  },
}
</script>

<style>
</style>

非兄弟组件传值和VUEX
事件总线传值
新建一个js文件 memeda.jsimport Vue from 'Vue'
var Bus = new Vue({})
export default Bus
新建两个组件
{{msg}}
 发送
import Bus from '../memeda.js'
import Home1 from './home1'//引入Home1组件 同一页面展示
export default {
components:{
Home1
},
data(){
return{
msg:'我是home'
}
},
methods:{
fn(){
Bus.$emit('meme',this.msg)
}
}
}
{{msg}}
import Bus from '../memeda.js'
export default {
data(){
return{
msg:'我是home1111'
}
},
mounted(){
Bus.$on('meme',(res)=>{
alert(res);//我是home
})
}
}
VUEX传值(mutations和state)
逻辑图
安装VUEXnpm i vuex --save
自建js文件import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
Vue.use(Vuex)//挂载
var state1 ={
count:1
}
var mutations={//定义一个方法 所有的全局方法都可以加在里面
incCount(){//函数名
++state1.count;
}
}
var state = new Vuex.Store({//实例化Vuex
state:state1,//固定写法
mutations//固定写法 通过this.$store.commit调用
})
export default state
全局main.js引入import store from './store/index'
new Vue({
store,
})
全局组件调用数据{{this.$store.state.count}}
全局调用方法 发送
methods:{
dianji(){
this.$store.commit('incCount');//对应的是自建js文件里面的方法
}
}
Getters方法import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
Vue.use(Vuex)//挂载
var state1 ={
count:1
}
var mutations={//定义一个方法 所有的全局方法都可以加在里面
incCount(){//函数名
++state1.count;
}
}
var getters={//通过this.$store.getters.computedCount调用
computedCount(){//当state里面数据发生变化后自己自动计算的值
return state1.count*20//必须return
}
}
var state = new Vuex.Store({//实例化Vuex
state:state1,//固定写法
mutations,//固定写法 通过this.$store.commit调用
getters//挂载getters
})
export default state
调用
Getters数据：{{this.$store.getters.computedCount}}
Action异步方法(ajax，计时器)
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
Vue.use(Vuex)//挂载
var state1 ={
count:1
}
var mutations={//定义一个方法 所有的全局方法都可以加在里面
incCount(){//函数名
++state1.count;
}
}
var getters={//通过this.$store.getters.computedCount调用
computedCount(){//当state里面数据发生变化后自己自动计算的值
return state1.count*20//必须return
}
}
var actions = {//定义actions
memeda(context){//形参必写！！！ 通过this.$store.dispatch('memeda')调用
context.commit('incCount');//执行上面的方法 固定写法
}
}
var state = new Vuex.Store({//实例化Vuex
state:state1,//固定写法
mutations,//固定写法 通过this.$store.commit调用
getters,//挂载getters
actions//挂载actions
})
export default state
调用 Actions
methods:{
aaa(){
this.$store.dispatch('memeda')
}
}

兄弟组件传值


兄弟组件之间彼此没有联系，它们需要通过中间Vue实例对象bus(快递员)进行数据传递。

1. 声明事件
给组件实例(或Vue实例) 声明事件有两种方式：

直接声明
通过$on实现

给组件实例声明事件：
<组件 @事件名称="事件驱动方法"></组件>

通过$on进行声明：
// 语法：
组件实例.$on(事件名称，事件驱动方法(形参，形参){})
// 例如：
// 声明事件
vm.$on('hello',function(traffic,city){console.log(`我坐着{$traffic}到达${city}城市`)})


注意：组件实例  和 vue实例  都可以调用$on。

2. 兄弟组件传值
实现步骤：


定义模块 src/bus.js，内容就是导入Vue模块，并导出一个Vue实例对象：
import Vue from 'vue'
export default new Vue() 



在各个兄弟组件中，导入 bus.js 模块：
import bus from '@/bus.js'


虽然bus.js被各个组件都导入，但是系统中bus只有一份。



在接收数据的兄弟组件的 created 生命周期方法里(使得事件及时响应)，发送数据的组件中声明
使用 bus.$on(‘事件名称’, (接收的数据) => {}) 定义事件成员方法
created(){
  // 定义事件,注意箭头函数应用
  bus.$on('xxx', data=>{
    console.log(data)
  })
}


xxx是事件方法的名称。data是形参，待接收数据，并且可以定义多个。
注意：如果$on内部要使用this，请通过"箭头函数"声明方法。



在发送数据的兄弟组件中，使用 bus.$emit(‘事件名称’, 要发送的数据) 来向外发送参数。
<button @click="sendMsg">传值</button>
export default {
  methods: {
    sendMsg(){
      // 触发绑定的事件，并向外传递参数。
      bus.$emit('xxx', '1000元保护费')
    }
  }
}




第一个参数xxx 是接收数据组件给bus声明的方法。第二个参数是传递的实参数据。

说明：


Vue实例可以调用$on()方法进行事件方法创建
实例.$on(名称,(形参，形参，形参……){})


参数根据需要，可以是一个或多个。



Vue实例可以调用$emit()方法进行事件方法执行
实例.$emit(名称,实参，实参，实参……)


参数 与 $on的形参是一一对应的。



注意：
虽然各个兄弟组件针对bus.js都有做引入，系统在运行的时候只有一个bus对象，故大哥 给 bus绑定的事件方法，兄弟组件可以通过bus调用。
案例应用：
兄弟组件传值
src/bus.js代码：
// 快递员，负责兄弟组件之间传递数据
import Vue from 'vue'
// 导出一个Vue对象
// 注意：这是一个新的对象，与main.js里边的没有关系
export default new Vue()

First.vue代码(created、$on设置事件方法，准备接受数据)：
<template>
    <div id="first">
      <h3>大哥组件</h3>
      <span>{{dt}}</span>
    </div>
</template>

<script>
// 导入bus的模块对象
import bus from '@/bus.js'

export default {
  name: 'First',
  data () {
    return {
      dt: ''
    }
  },
  // 第一时间就把事件声明好，以便小弟调用并传递数据
  created () {
    // 实例对象.$on(事件名称,function(形参,形参){}事件事件的回调方法)
    // 注意：回调函数变为箭头函数，使得this可以正确使用
    bus.$on('jieshou', msg => {
      // console.log(msg)
      // 把数据给dt接收
      this.dt = msg
    })
  }
}
</script>

Second.vue代码(bus调用$emit()调动事件进行数据传递)：
<template>
    <div id="second">
      <h3>小弟组件</h3>
      <button @click="back()">给大哥回话</button>
    </div>
</template>

<script>
// 导入bus的模块对象
import bus from '@/bus.js'

export default {
  name: 'Second',
  methods: {
    // 给大哥组件传值
    back () {
      // 使得bus调用自己的事件(是大哥给bus声明的)
      // bus.$emit(事件，参数，参数)
      bus.$emit('jieshou', '1000元保护费')
    }
  }
}
</script>

App.vue代码(引入、注册、使用各个兄弟组件)：
<template>
  <div id="app">
    <h2>App根组件</h2>
    <first></first>
    <second></second>
  </div>
</template>

<script>
// 引入、注册、使用 两个兄弟组件
import First from './components/First.vue'
import Second from './components/Second.vue'

export default {
  components: {
    First,
    Second
  }
}
</script>

父子组件中的传值 父向子 v-bind props
<!-- 组件使用v-bind传值 -->
 <router :msg="msg"></router>

子组件:
<p>子组件 ----- {{msg}}</p> 

 props: ["msg"], //props接收

props:验证
props: {
    // fooA只接受数值类型的参数
    fooA: Number,
    // fooB可以接受字符串和数值类型的参数
    fooB: [String, Number],
    // fooC可以接受字符串类型的参数，并且这个参数必须传入
    msg: {
      type: String,
      required: true
    },
    // fooD接受数值类型的参数，如果不传入的话默认就是100
    fooD: {
      type: Number,
      default: 100
    },
    // fooE接受对象类型的参数
    fooE: {
      type: Object,
      // 当为对象类型设置默认值时必须使用函数返回
      default: function() {
        return { message: "Hello, world" };
      }
    },
    // fooF使用一个自定义的验证器
    fooF: {
      validator: function(value) {
        return value >= 0 && value <= 100;
      }
    },
　　fooG: {
      type:Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return [];
      }
    },
}


props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值，Vue 警告。

子向父 v-on $emit
子组件:
<button @click="cyy">按钮</button>
methods: {
    cyy() {
      this.$emit("zifu", "子组件向父组件传值", true);
    }
  }

父组件:
<router  v-on:zifu="hehe"></router>
methods: {
   hehe: function(data, data2) {
     console.log(data, data2);
   }
}

兄弟组件中的传值
Bus中央事件总线

父组件组件代码:
<div> //爸爸A
    <router></router>    //哥哥A1
    <vuex></vuex>　　　　//弟弟A2
</div>


哥哥A1组件:

<button @click="cyy">按钮</button> 点击按钮向弟弟A2传值脚本中:import Bus from "../api/Bus";   //注意引入
export default {
  data() {
    return {
      a: 1
    };
  },
  methods: {
    cyy() {
      Bus.$emit("zifu", this.a++, "子组件向兄弟组件传值");    //存 Bus.$emit
    }
  }
};


弟弟A2组件:

<p>接受兄弟A1传值=-------第{{ccc}}次,向{{ddd}}</p>脚本中:

import Bus from "../api/Bus";
export default {
  data() {
    return {
      ccc: "",
      ddd: ""
    };
  },
  created() {
    Bus.$on("zifu", (val, val1) => {    //取  Bus.$on
      this.ccc = val;
      this.ddd = val1;
    });
  }
};