背景：
组件之间传值，父组件将数据传递给子组件，子组件通过操作同步修改父组件传递过来的数据

1. 简单传递值和接收值

<script>// 创建 vue实例const app = Vue.createApp({// 数据项data() {return {num: 123456}},// 动态传达参数template:  `<div> <test v-bind:content="num"/></div>`});app.component('test', {//  使用 props 接收传的值// props: ['content'],// 字符串校验// props: {//     content: String// },// type: String Boolen Array Object Function Symbol// required 必填// default  默认值props:{content:{type: Number,required: true,// 传的值小于1000校验通过，大于1000会被警告validator: function( value) {return value < 1000;},default: function () {return 789;},}},template:  `<div> {{content}}{{typeof content}}</div>`});const vm = app.mount('#root');</script>

2. 单项数据流
单项数据流：可以理解为，父类传递给子类的数据，子类只能使用，不能修改。
子类想要修改，需要在子类中重新定义一个自己的数据进行接收。

<script>// 创建 vue实例const app = Vue.createApp({data() {return{num:1,}},template:  `<div> <test :count="num" /></div>`});// 自定义组件app.component('test', {props:["count"],data() {return {number: this.count}},methods: {addone() {this.number += 1;},},template:  `<div @click="addone"> {{number}}</div>`});const vm = app.mount('#root');</script>

3. 子类修改父类传递过来的数据
如果子类想修改父类传递过来的数据，需要使用$emit 进行

<script>// 创建 vue实例const app = Vue.createApp({data() {return{num:1,}},methods: {handleAddOne() {// alert(123);// this.num  += 1;},},// 注意：add-one 是子类 方法addOne 监听template:  `<div> <test :count="num"  @add-one="handleAddOne"/></div>`});// 自定义组件app.component('test', {props:["count"],emits:{add: (count) => {// 进行数据校验if (count > 0) {return true} else {return false}},},methods: {addOne() {this.$emit('addOne', 3);},},template:  `<div @click="addOne"> {{count}}</div>`});const vm = app.mount('#root');</script>