组件传值（父子组件传值、兄弟组件传值）

父子组件是两个封闭的作用域

父组件为User.vue   

子组件为status.vue，detail.vue

父组件往子组件里面传值：

1.在子组件中自定义可以接收的属性：

<script>
export default{
  props:['name']//props:['name','age']可以传多个自定义属性

}
</script>

2.在父组件中引用子组件

<template>
<app-status
   :name="name"></app-status>
</template>
<script>
//引入
import Status from "./status.vue"
export default{
  data(){
   return{
       name:"zcy"
     }
  },
  //注册
  components:{
    "app-status":Status
  }
 
}
 
</script>

3.这时候，我们就可以在子组件中使用这个name了

<template>
<div>
<p>{{name}}</p>
</div>
</template>

4.如果我们直接改变props的name属性的值，会报错(怕我们数据流发生混乱)，所以我们要定义一个属性初始化这个传过来的name

<template>
<div>
<p>{{myName}}</p>
<p>{{changeName()}}</p>
</div>
</template>
<script>
export default{
  props:['name'],
  data(){
   return{
     myName=this.name
    }
  },
  methods:{
   changeName:function(){
     this.myName='xiaoming';
    }
  }

}
</script>

5.props验证，可以传一个也可以传多个，必须传

required:true，default:'daming'  这两个只能存在一个，必传或者默认

<script>
export default{
  //props:['name'],
  props:{
   name:String,
   name:[String,Array,Number],
   name:{
    type:String,
    required:true//必须传，存其一
    default:'daming'//默认，存其一
   },
   //如果是Object
    name:{
    type:Object,
    //required:true//必须传，存其一
    default(){
     return{
      
     }
    }
   },
   //age:Number
  },
  data(){
   return{
     myName=this.name
    }
  },
  methods:{
   changeName:function(){
     this.myName='xiaoming';
    }
  }

}
</script>

子组件往父组件里面传值：

方式一：官方推荐

1.在子组件中绑定上点击事件，然后通过$emit触发自定义的事件（事件名和值）

<template>
<div>
<p>{{myName}}</p>
<p>{{changeName()}}</p>
<p><button @click="changePName">改变父级的name</button></p>
</div>
</template>
<script>
export default{
  props:{
    name:{
       type:String
     }
   },
  data(){
   return{
     myName=this.name
    }
  },
  methods:{
   changeName:function(){
     this.myName='xiaoming';
    },
   changePName:function(){
      this.$emit('changePName','xiaohuang');
    }
  }

}
</script>

2.在父组件中绑定上这个自定义的事件

<template>
<app-status
   :name="name"
   @changePName="changeName"></app-status>
</template>
<script>
//引入
import Status from "./status.vue"
export default{
  data(){
   return{
       name:"zcy"
     }
  },
  //注册
  components:{
    "app-status":Status
  },
  methods:{
   changeName:function(name){
     this.name=name;
   }
  }
 
}
 
</script>

方式二：

1.在父组件里面写个callback函数，然后绑定在引入的子组件属性上:callback="callback"

<template>
<app-status
   :name="name"
   @changePName="changeName"
   :callback="callback"></app-status>
</template>
<script>
//引入
import Status from "./status.vue"
export default{
  data(){
   return{
       name:"zcy"
     }
  },
  //注册
  components:{
    "app-status":Status
  },
  methods:{
   changeName:function(name){
     this.name=name;
   },
   callback:function(name){
     this.name=name;
   }
  }
 
}
 
</script>

2.在子组件里面接收一下函数

<template>
<div>
<p>{{myName}}</p>
<p>{{changeName()}}</p>
<p><button @click="callback('xiaohuang')">改变父级的name</button></p>
</div>
</template>
<script>
export default{
  props:{
    callback:Function //函数
  }
}
</script>

兄弟组件传值：

方式一：通过共有的父组件作为桥梁，多层嵌套时麻烦

1.在父组件data中定义age为10，然后绑定在两个引入的两个子组件中：age="age"

2.在子组件中通过props去接收props:["age"]，绑定上点击事件，在事件中通过$emit去触发自定义的事件

3.在父组件中引入的当前的子组件上绑定上自定义事件并写上对应的函数

方式二：绑定和触发全局事件

1.在main.js中注册一个新的Vue实例

export const EventBus=new Vue()

2.在子组件status.vue中引入这个EventBus，这个子组件去改变另一个兄弟子组件

<template>
<div>
<p>{{age}}</p>
<p><button @click="changeAge">改变兄弟值</button></p>
</div>
</template>
<script>
import {EventBus} from "./main.js"
export default{
 data(){
  return{
    age:10
  }
 },
 methods:{
  changeAge:function(){
   this.age=20;
   EventBus.$emit("editAge",this.age);//全局触发自定义事件
  }

}


}
</script>

3.在子组件detail.vue中去引入EventBus，通过$on绑定上自定义事件

<template>
<div>
<p>{{age}}</p>
</div>
</template>
<script>
import {EventBus} from "./main.js"
export default{
 data(){
  return{
    age:10
  }
 },
 methods:{

 },
create(){
  EventBus.$on("editAge",(age)=>{
   this.age=age;
  });//绑定自定义事件
  
}

}
</script>