vue3中父子组件传值,传参。vue3 defineProps 传参默认值。方法调用

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: "完成人次"
    },
    IsQueryMySelf: {
        type: Boolean,
        default: false
    },
    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这种。

注意：父向子传参数的时候要注意时机问题哦，比如要传递的某个参数要从接口里边查询回来，然后组件的加载要比接口数据返回回来之前被加载了，这样传递到组件里边的参数永远都是默认的参数，不会是从接口回来的参数，所以这种情况就要进行处理，可以考虑等接口返回回来了在去加载组件，或者在子组件里边去监听一下父组件传递参数的值的变化也可以。

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