### 1、父向子 父组件引用子组件的时候，在子组件上自定义一个属性，属性名随意 ，属性值是你要传的参数。 ``` <template> <div class="home"> <HelloWorld :index="num" /> //子组件 </div> </template> ``` 然后在子组件代码script标签中，导入definePops 这个方法，定义一个常量props用来接收父组件传过来的值，就可以了。 ``` <script setup> import {ref ,defineProps} from "vue"; const props = defineProps({ index:{} }) </script> ``` 页面上这么使用: ``` <template> <div class="hello"> <h2>{{ index }}</h2> </div> </template> ``` #### 如果有默认值可以这样 ``` const props = defineProps({ schoolId: String, title: { type: String, default: "完成人次" }, taskIds: { type: [] as any, default:[] } }) ``` #### 如果是转递的多个可以这样使用 传递： ``` <OceanFreightTableEdit title="海运费" :isCanEditOceanFreight="ruleForm.isCanEditOceanFreight" ref="OceanFreightTableEditRef"></OceanFreightTableEdit> ``` 接收 ``` const props = defineProps({ title: String, isCanEditOceanFreight: Boolean }) ``` 取值： ``` <el-checkbox v-if="props.isCanEditOceanFreight" checked="true" disabled="true" v-model="isCanEdit" size="default" /> ``` 取值直接可以这样：props.isCanEditOceanFreight,props.title这种。 tn4>注意：父向子传参数的时候要注意时机问题哦，比如要传递的某个参数要从接口里边查询回来，然后组件的加载要比接口数据返回回来之前被加载了，这样传递到组件里边的参数永远都是默认的参数，不会是从接口回来的参数，所以这种情况就要进行处理，可以考虑等接口返回回来了在去加载组件，或者在子组件里边去监听一下父组件传递参数的值的变化也可以。 ### 2、子向父 在子组件声明一个任意常量，用于定义传输参数的方法，名字自定义。 ``` const emit = defineEmits(["updateNum"]); ``` 同时在子组件中定义一个方法去触发emit这个方法， ``` emit('updateNum',value) //value是传给父元素事件的参数 ``` 父组件中子组件标签上加一个方法，调用方法参数就是子组件传给父组件的参数 ``` <template> <div class="home"> <HelloWorld @undataNum='getNum' :index="num" /> </div> </template> <script> const getNum =(value)=>{ console.log(value);//value为传过来的参数 } </script> ``` #### 子向父还有一种方法 在子组件中导入defineExpose方法，把你想要传的参数抛出去 ``` <script setup> import { ref, defineProps, inject, defineExpose } from "vue"; const numPlus = ref(1); defineExpose({ numPlus}); </script> ``` 在父组件中子组件的标签上接收ref，名字自定义 ``` <HelloWorld :index="num" ref="treeRef" /> ``` 然后再页面直接打印就可以了 ``` console.log(treeRef.value.numPlus); ```