vue组件间的传值，父传子，子传父，兄弟之间传值，跨级传值

1.父传子

在vue中可以使用props向子组件传递数据
父组件内容

<template>
		<div id="app">
				<Child   :info="data">   </Child>
        </div>
</template>

在调用组件的时候，使用 v-bind 将 info的值绑定为 App.vue 中定义的变量 data

<script>
	import  Child  from "./components/child"
	export  default {
	   name:"app",
		data(){
			return{
			    data:"我是钱家寄"
			}
		},
		    components:{Child}
    }
</script>

子组件内容
如果要从子组件中获取到父组件中的值，需在子组件中写props[“info”]

<script>
    export default{
		name:'child',
		props:["info"]
   }
</script>

2.子传父

子组件主要通过事件传递数据给父组件
子组件内容

<template>
	<div>
	   <button @click="buggle">buggle</button>	
   </div>
</template>
<script>
	 data(){
		return{
		  username:"我是钱家寄"
		},
		methods:{
		  buggle(){
		     this.$emit("message",this.username)
		  }
		}
</script>

父组件内容

<template>
		<div>
				<Child @message="user"></Child>
		</div>
</template>
<script>
	import Child from "./componets/child.vue"
	export default{
		data(){
			return{
    			data:{}
    		}
		},
		components:{Child},
		methods:{
			user:function(val){
				this.data=val
			}
	   }		
	}
</script>

3.兄弟传值

第一种方式：先子传父，然后再父传子，需要注意的是使用props的时候，需要在computed中使用，监听数据变化。

第二种方式：借助中央事件总线bus.js
1.可以在assets文件夹下新建一个bus.js文件

import Vue from 'vue';
export default new Vue;

2.将2个组件做为子组件放入一个父组件中，在同一页面显示

<template>
<div>
		<b1></b1>
		<b2></b2>
</div>
</template>
<script>
import b1 from "./component/b1.vue"
import b2 from "./component/b2.vue"
export default {
   component:{
	  b1,b2
   }
}
</script>

3.在b1和b2组件中分别引入bus.js
b1组件

<script>
import Bus from 'bus.js' ;
export default {
  
  created() {
    // 在需要的传递数据的时候调用sendData方法，这里模拟调用
    this.sendData();
  },
  methods: {
    sendData () {
      Bus.$emit('listenToA', 'hello');
    }
  }
}
</script>

b2组件

<script>
import Bus from 'bus.js';
export default {
  name: "b",
  monted() {
    Bus.$on('listenToA', this.getAData);
  },
  methods: {
    getAData (val) {
      console.log(`a组件传递过来的数据: ${val}`); // hello
    }
  }
}
</script>

4.跨级传值

provider/inject
父组件：

//父组件示例

<template>
  <div>
    <childCom></childCom>
  </div>
</template>
<script>
  import childCom from '../components/childCom'
  export default {
    provide: {      //重要一步，在父组件中注入一个变量
      msg: "demo"
    },
    components:{
      childCom
    }
  }

子组件：

//子组件示例，这个不管嵌套了多少层，都能请求到父组件中注册的变量

<template>
  <div>
      {{msg}}
  </div>
</template>
<script>
  export default {
    name: "childCom",
    inject: ['msg'],//子孙组件中使用inject接住变量即可
  }
</script>