Skip to content

index.vuecrud.tsx之间的传值

index.vue传值给crud.tsx

index.vue中创建ref

js
const props = defineProps({...})
const fooRef = ref(0)
const context: any = {
  fooRef //将fooRef 通过context传递给crud.tsx
  props,
};

crud.ts中使用fooRef

js
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const {fooRef,props} = context  // 从context中获取fooRef
  return {
    crudOptions: {
      columns:{
        test:{
          title:'foo',
          valueChange(scope){
            // 使用或者修改 fooRef
            console.log(fooRef.value)
            fooRef.value = scope.value
          }
        }
      }
    }
  }
}

crud.tsx传值给index.vue

crud.tsx 中创建ref

js
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const fooRef = ref(0)
  context.fooRef = fooRef //将fooRef 通过context传递给index.vue
  return {
    crudOptions: {
      ...
    }
  }
}

index.vue中使用fooRef

js
const {crudRef, crudBinding, crudExpose, context} = useFs({createCrudOptions});
const {fooRef} = context //从context中获取fooRef

直接将crud.tsx写在index.vue

直接将crud.tsx写在index.vue中,就没有什么传值的问题了,直接正常使用ref即可

js
const fooRef = ref(0)
function createCrudOptions({crudExpose}: CreateCrudOptionsProps): CreateCrudOptionsRet {
  return {
    crudOptions: {
      ...
      //使用或者修改 fooRef
    }
  }
}

Released under the MIT License.