vue3学习笔记

1.ref 定义各种类型的数据

  const title = ref<string>('');
  const width = ref<number>(800);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);
  const  rolesList= ref([] as  any[])

2.父组件给子组件传值 defineProps

父组件
<template>
// 省略了一些无关紧要的代码
// 调用了子组件<server-select>
	<div>
		<server-select v-model:value="servers" :servers="sids" />
	</div>
</template>

<script lang="ts" setup>

const servers = ref()

// 要把这个变量传给子组件
const sids = ref('12')

</script>

<template>
子组件
// 绑定了父组件传过来的值
	<n-select
		v-model:value="$props.sids"
		:multiple="true"
		:options="options"
		placeholder="请选择主机">
	</n-select>
</template>

<script lang="ts" setup>

/* import { useVModel } from '@vueuse/core'

interface Props {
	value: string[]
	setDefault?: boolean // 是否设置默认值
	alarm: boolean
}

const props = withDefaults(defineProps<Props>(), {
	setDefault: false,
	alarm: false,
})

const method = useVModel(props, 'value')
*/

// 声明一个props变量接受父组件传的变量
const props = defineProps({
  sids: String
})

</script>

3.vue3 路由跳转传参接参

import { useRouter, useRoute} from 'vue-router'
const router = useRouter()      //传参

 router.push({ path: '/system/qualification' , query: record})
 router.push({ name: 'sys' , params: record})

 const route = useRoute()      //接参
 route.query
 route.params

onMounted

  onMounted(()=>{
		console.log("测试",route)
			
	})

useTable 配置

 const [registerTimeTable] = useTable({
        title: '钻孔采样信息',
        columns: refundTimeTableSchema,
		 api: list,
        pagination: true,
        dataSource: refundTimeTableDatas,
		// 是否显示操作列
		showActionColumn: true,
        showIndexColumn: true,
        scroll: { y: 400 },
		 // 操作列
		actionColumn: {
		  width: 120,
		  title: '操作',
		  //是否锁定操作列取值 right ,left,false
		  fixed: false,
		  dataIndex: 'action',
		  slots: { customRender: 'action' },
		},
      });