Vue组件传值

---

一、父组件 传 子组件（ props ）

	// 父给子绑定值
	<Swiper :title='title' :num='num'></Swiper>
	
	// 子接收，直接使用 {{ title }} {{ num}}
	export default{
	1、  props: ['title','num']
	2、  props: {
			title: String,
			num: Number
		}
	}

二、子组件 传 父组件（自定义事件）

	// 子组件Child  （定义自定义事件）
	<button @click="btn">点击传值</button>
	methods: {
		btn() {
			// 参数1：自定义事件
			// 参数2：是要传递的数据
			this.$emit('changeStr', this.str)
		}
	}
	
	// 父组件
	<Child @changeStr="receiveStr"></Child>
	methods: {
		receiveStr(val){  // val：接收到的子组件数据，参数2
			this.str = val
		}
	}

三、兄弟组件传值 (bus)

	// bus.js 文件
	import Vue from 'vue';
	export default new Vue;
	
	// 兄弟A组件
	import bus from './bus'
	<button @click='clickBtn'>点击传值</button>
	methods: {
		clickBtn() {
            bus.$emit('changeMax', this.maxStr)
        }
	}
	
	// 兄弟B组件
	import bus from './bus'
	created() {
      bus.$on('changeMax', (res) => {
        console.log(res);
      })
    },
    beforeDestroy() {
      bus.$off('changeMax');
    },
	
	// 全局配置bus ---------------------------------
	// main.js中加入
	const bus = new Vue()
	Vue.prototype.$bus = bus;
	//使用
	this.$bus.$emit
	this.$bus.$on
	this.$bus.$off