vue3 组件之间的值和方法的动态传递

话不多说，直接贴代码！

父组件FunctionalPermissions

<template>
 <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="功能权限" name="first">
    <!-- 父组件FunctionalPermissions -->
      <FunctionalPermissions
        v-if="activeName === 'first'"
        :positionInfo="positionInfo" 
        @refresh="refresh"
      />
    </el-tab-pane>
    <el-tab-pane label="页面访问权限" name="second">
      <AccessPermissions v-if="activeName === 'second'" />
    </el-tab-pane>
    <el-tab-pane label="成员" name="third">
      <Member v-if="activeName === 'third'" />
    </el-tab-pane>
  </el-tabs>
 </template>
  
<script setup lang="ts">
import { reactive, toRefs, } from 'vue';

const state = reactive<any>({
  positionInfo: {},
});

const { positionInfo } = toRefs(state);

// 保存后数据重新赋值，高亮更新
const refresh = async (num: number) => {
      console.log(num) // 123
  }
};

</script>

子组件

<script setup lang="ts">

// 获取值
const props = defineProps(['positionInfo']);
// 获取方法
const emit = defineEmits(['refresh']);

// 子组件执行某操作后，将参数给父组件
const save = async () => {
    emit('refresh', 123);
};

// 需要对值进行监听
watch(
  () => props.positionInfo,
  () => {
   // 父组件的值发生变化的时，执行对应的方法 
    handleQuery();
  }
);

</script>