使用<script setup>的组合式写法

在<script setup>中可以默认使用 defineProps（父传子）和defineEmits（子传父）不需要单独引入

使用方法分别是父传子

  <add-dialog
     :dialogFormVisible="dialogFormVisible"
     @emit-dialog-form-visible="getdialogFormVisible"
  />
  <script setup>
      const dialogFormVisible = ref(false);
      const getdialogFormVisible = (val) => {
        dialogFormVisible.value = val;
      };
  <script>   

在子组件中绑定

 <el-button @click="emit('emitDialogFormVisible', false)">取消</el-button>
 <script setup>
     const prop = defineProps({
       dialogFormVisible: {
         default: '',
         type: Boolean,
       },
     });
     const emit = defineEmits(['emitDialogFormVisible']);
<script>   

这样实现双向绑定可以实现父子组件传值的交互

使用setup()

如果平时喜欢使用setup(){}的同学可以在props和context中实现父子组件传值

![%]S%L%IRWP9T`BLQ}A865.png](p1-juejin.byteimg.com/tos-cn-i-k3…?)

 setup(porps,context){
   const {attrs,slot,emit} = context
   }