02Vue中的父子传值问题

1.父传子
父组件：(用v-bind(简写 : ) 将父组件传的值绑定到子组件上)

<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>

子组件：（在子组件中用props方法接收父组件传来的值，两种方法，推荐第二种）

<template>
  <div>
    我是儿子：{{message}}
    <br>
    爸爸给我的礼物：{{toSonData}}
  </div>
</template>
 
<script>
export default {
  // props:["toSonData"],//第一种方式
  props:{//第二种方式
    toSonData:{
      type:String,
      default:function(){
        return ""
      }
    }
  },
  data () {
    return {
      message : "爸爸你好"
    };
  },
}
</script>

2.子传父
子组件(在子组件中创建一个按钮，定义一个点击事件，点击事件里用this.$emit方法触发一个自定义事件，并传递一个参数)

<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>

父组件(在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法，将接收到的值赋给data中的sendSonMessage)

<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>