vue组件的基本传值方法

***组件的通信（传值）

1》父组件   传   子组件

	父组件：
		<子组件 :变量=数据></子组件>
	子组件：
		props:['变量']

2》子组件   传   父组件（自定义事件）

	子组件：
		  this.$emit("自定义事件名称",'值') 
		  //自定义事件名称也就是下面的changeStr
	
	父组件：
		<Footer @changeStr='changeBtn'></Footer> 
		methods:{
		    changeBtn(s){
		        console.log(s)
		    }
		}

3》兄弟组件之间的传值

	1》弄一个公共的.js文件（实例化vue）
	
	兄弟A:
		import bus from './bus'
		bus.$emit("changeaStr",this.aStr)
	兄弟B：
		import bus from './bus'
		bus.$on("changeaStr",function(data){
			console.log(data)
		})

***组件的传值，不能跳跃(假设有A B两个同级组件，A的子组件Aa不能
直接传值到B的子组件Bb，而是要通过Aa→A→B→Bb)，用vuex可以解决这个问题

一、vuex是什么？==>状态管理模式
创建项目时候选上

二、vuex使用

store.js:
	import Vue from 'vue'
	import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  	cityName:"shanghai" //放入的数据
  },
  mutations: {

  },
  actions: {

  }
})

	使用state数据》
			1》{{ this.$store.state.cityName }}
			2》import {mapState} from 'vuex'
			   computed:mapState(["cityName"])
			3》computed:{
					...mapState(['cityName'])
			    }
			    
	修改state数据》
	1》store.js

		mutations: {
			changeStr(state){
				state.str=456;
			}
		}

	2》组件
		import {mapState,mapMutations } from 'vuex'
		<button @click='btn'></button>
		methods:{
			btn(){
		          this.changeStr()
		    },
		    ...mapMutations(['changeStr'])
		}