組件傳值（父子組件傳值、兄弟組件傳值）

父子組件是兩個封閉的作用域

父組件爲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>