vue3中setup语法父子组件传值总结

一、父组件修改子组件中的变量值

        1、子组件将需要修改的值曝露出来

const isShow = ref(false);

defineExpose({isShow});

        2、父组件使用子组件标签，并定义ref属性，并在script中定义ref属性值；在需要修改的地方调用     ref属性值.value.要修改的变量=* 的方式直接修改即可

<Editor ref="editor" :row="editorRow"></Editor>

<script setup lang="ts">
    const editor = ref(null);      //此处editor与子组件中ref属性同名

    editor.value.isShow=true;        //在需要的地方通过value下曝露出来的变量名修改
</script>

二、父组件向子组件传递值

        1、父组件通过子组件自定义的标签属性传入值

<template>
    <Editor ref="editor" :row="editorRow"></Editor>    //子组件通过自定义属性row将editRow传入
</template>

<script setup lang="ts">
    const editorRow = ref(null);
<script>

        2、子组件通过defineProps接收传入的数据

//这里的row保证与自定义的标签属性名相同
const props = defineProps(["row"]);

//标签中可以通过row来使用传入的内容，比如
<el-form :model="row">

//脚本中用props.row来使用，比如
console.log(props.row);