vue 组件之间传值（父传子，子传父）

<template>
   <div>
       我是爸爸：{{message}}
       <hr>
       <Son :toSonData="toSonData"></Son>
   </div>
</template>

<script>
   import Son from "./Son.vue";
   export default {
   data() {
        return {
            message : "儿子你好",
            toSonData: "苹果??" //给子组件的值
        };
   },

     components: {
          Son
     }
  };
</script>
<style lang=‘scss‘ scoped>
</style>

<template>
　　<div>
　　　　我是儿子：{{message}}
　　　　<br>
　　　　爸爸给我的礼物：{{toSonData}}
　　</div>
</template>

<script>
　　export default {
　　　　// props:["toSonData"],//第一种方式
　　　　props:{//第二种方式
　　　　　　toSonData:{
　　　　　　type:String,
　　　　　　default:function(){
　　　　　　　　return ""
　　　　　　}
　　　　}
　　},
　　data () {
　　　　return {
　　　　　　message : "爸爸你好"
　　　　};
　　},
　}
</script>
<style lang=‘scss‘ scoped>
</style>

<template>
　　<div>
　　　　我是儿子：{{message}}
　　　　<br>
　　　　爸爸给我的礼物：{{toSonData}}
　　　　<br>
　　　　<button @click="toFatherData">给爸爸传值</button>
　　</div>
</template>

<script>
　　export default {
　　　　// props:["toSonData"],//第一种方式
　　　　props:{//第二种方式
　　　　　　toSonData:{
　　　　　　type:String,
　　　　　　default:function(){
　　　　　　　　return ""
　　　　　　}
　　　　}
　　},
　　data () {
　　　　return {
　　　　　　message : "爸爸你好"
　　　　};
　　},
　　methods:{
　　　　toFatherData(){
　　　　　　this.$emit("toFatherData","给爸爸的爱")
　　　　}
　　}
}

</script>
<style lang=‘scss‘ scoped>

</style>

<template>
　　<div>
　　　　我是爸爸：{{message}}
　　　　<br>
　　　　儿子传来的值:{{sendSonMessage}}
　　　　<hr>
　　　　<Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
　　</div>
</template>

<script>
　　import Son from "./Son.vue";
　　export default {
　　　　data() {
　　　　　　return {
　　　　　　　　message : "儿子你好",
　　　　　　　　toSonData: "苹果??", //给子组件的值
　　　　　　　　sendSonMessage: ""
　　　　　　};
　　　　},

　　components: {
　　　　Son
　　},
　　methods:{
　　　　sendSonData(data){
　　　　　　this.sendSonMessage=data;
　　　　}
　　}
};
</script>
<style lang=‘scss‘ scoped>
</style>