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>