vue父子组件通过$emit和props实现相互传值

vue父子组件相互传值是非常常见的场景，例如弹框场景或公共功能模块的封装场景。常用的是采用$emit和props的方式。
其中$emit是子组件向父组件传值，props是父组件向子组件传值。
以下为全部代码

父组件FirstPage.vue

<template>
  <div>
    <!-- 父组件取出子组件传递过来的json数据，并显示到父组件的页面上 -->
    <div class='parentClass'>我是父组件：子传父为{{toParent}}</div>
    <!-- 父组件通过自定义的toChild1和toChild1属性，向子组件传值 -->
    <!-- toChild1是静态属性,对应的值为Apple -->
    <!-- :toChild2是动态属性，对应的值不是attributeValue，而是orange -->
    <!-- 父组件通过@toParent来监听子组件传递过来的事件，然后通过自定义的toParentValue函数来触发 -->
    <PassChild toChild1='Apple' :toChild2='attributeValue'  @toParent='toParentValue'></PassChild>
  </div>
</template>
<script>
import PassChild from "../components/PassChild.vue";

export default {
  data() {
    return {
      // 默认值
      toParent:'',
      // 动态属性值
      attributeValue:'orange'
    };
  },
  methods: {
    toParentValue(value){
      // 父组件取出子组件传递过来的json数据，并显示到父组件的页面上
      this.toParent = value.name;
    }
  },
  components: {
    PassChild:PassChild,
  }
};
</script>
<style>
.parentClass{
  margin:0 auto;
  width:600px;
  height:100px;
  text-align:center;
  color:orange;
  font-size:30px;
}
</style>

子组件PassChild.vue

<template>
  <div class='childContainer'>
        我是子组件：父传子为{{toChild1}},{{toChild2}}
  </div>
</template>
<script>
export default {
  // 父组件向子组件传值，通过props接收
  props: {
      toChild1: {
        type: String,
        required: true, // 父组件必须给子组件传递toChild1属性，否则会报错
        default: "toChild1的默认值"// 如果父组件没有给子组件传递toChild1属性，那么以默认值代替
      },
      toChild2: {
        type: String,
        default: "toChild2的默认值"// 如果父组件没有给子组件传递toChild2属性，那么以默认值代替
      }
 },
  data() {
    return {};
  },
  methods: {},
  mounted(){
       // 子组件向父组件传值(通过自定义toParent事件，并携带参数)，值为json数据{"name":'CoderZB','sex':'man'}。当然也可以传递单个字符串
       this.$emit("toParent",{"name":'CoderZB','sex':'man'});
  }
};
</script>
<style>
.childContainer{
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;
    background-color: red;
}
</style>

效果截图