Vue3+setup+ts使用技巧

1、组件引入

当使用setup的时候，组件直接引入就可以了，不需要再自己注册

<template>
  <Child />
</template>

<script setup lang="ts">
import Child from "./Child.vue";
</script>

2、ref和reactive

ref一般用于基本的数据类型，比如string、boolean，reactive一般用于对象ref的地方其实也是调用reactive实现的。

<template>
  <h1>{
   
   { title }}</h1>
  <div>
    {
   
   { data }}
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const title = ref("title");

const data = reactive({
  userName: "xiaoming",
  age: 18,
});
</script>

3、defineEmits和defineProps获取父组件传过来值和事件

// 第一种不带默认值props
const props = defineProps<{
  foo: string
  bar?: number
}>()
// 第二种带默认值props

export interface ChildProps {
  foo: string
  bar?: number
}

const props = withDefaults(defineProps<ChildProps>(), {
   foo: "1qsd"
  bar?: 3
})

// 第一种获取事件
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 第二种获取事件

const emit = defineEmits(["dosth"])

4. 使用 useAttrs 和 useSlots

useAttrs 可以获取父组件传过来的 id 、class 等值。 useSlots 可以获得插槽的内容。例子中，我们使用 useAttrs 获取父组件传过来的 id 、class、useSlots 获取插槽的内容。

//父组件
<template>
  <div class="father">{
   
   { fatherRef }}</div>
  <Child :fatherRef="fatherRef" @changeVal="changeVal" class="btn" id="111">
    <template #test1>
      <div>1223</div>
    </template>
  </Child>
</template>

<script setup lang="ts">
import { ref } from "vue";

import Child from "./Child.vue";

const fatherRef = ref("1");

function changeVal(val: string) {
  fatherRef.value = val;
}
</script>

<style lang="scss" scoped>
.father {
  margin-top: 40px;
  margin-bottom: 40px;
}
.btn {
  font-size: 20px;
  color: red;
}
</style>

//子组件
<template>
  <!-- <div class="child">{
   
   { props.fatherRef }}</div> -->
  <div v-bind="attrs">
    <slot name="test1">11</slot>
    <input type="text" v-model="inputVal" />
  </div>
</template>

<script setup lang="ts">
import { computed, useAttrs, useSlots } from "vue";

const props = defineProps<{
  fatherRef: string;
}>();

const emits = defineEmits(["changeVal"]);

const slots = useSlots();

const attrs = useAttrs();

console.log(122, attrs, slots);

const inputVal = computed({
  get() {
    return props.fatherRef;
  },

  set(val: string) {
    emits("changeVal", val);
  },
});
</script>

5、vue3 ts 获取组件 ref 实例

通过ref直接拿到dom引用

<template>
    <div class="demo1-container">
        <div ref="sectionRef" class="ref-section"></div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const sectionRef = ref()
</script>

通过对div元素添加了ref属性，为了获取到这个元素，我们声明了一个与ref属性名称相同的变量sectionRef，然后我们通过 sectionRef.value 的形式即可获取该div元素

通过父容器的ref遍历拿到dom引用

<template>
    <div class="demo2-container">
        <div ref="listRef" class="list-section">
            <div @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
                <span>{
   
   {item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const listRef = ref()
</script>

通过对父元素添加了ref属性，并声明了一个与ref属性名称相同的变量listRef，此时通过listRef.value会获得包含子元素的dom对象此时可以通过listRef.value.children[index]的形式获取子元素dom

通过:ref将dom引用放到数组中

<template>
  <div class="demo2-container">
      <div class="list-section">
          <div :ref="setRefAction" @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
              <span>{
   
   {item}}</span>
          </div>
      </div>
  </div>

  </template>

  <script setup lang="ts">
  import { reactive } from 'vue'

  const state = reactive({
      list: [1, 2, 3, 4, 5, 6, 7],
      refList: [] as Array<any>
  })

  const setRefAction = (el: any) => {
      state.refList.push(el);
  }
  </script>

通过:ref循环调用setRefAction方法，该方法会默认接收一个el参数，这个参数就是我们需要获取的div元素此时可以通过state.refList[index]的形式获取子元素dom

通过子组件emit传递ref

<template>
    <div ref="cellRef" @click="cellAction" class="cell-item">
        <span>{
   
   {item}}</span>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const props = defineProps({
    item: Number
})
const emit = defineEmits(['cellTap']);
const cellRef = ref();
const cellAction = () => {
    emit('cellTap', cellRef.value);
}
</script>

通过对子组件添加了ref属性，并声明了一个与ref属性名称相同的变量cellRef，此时可以通过emit将cellRef.value作为一个dom引用传递出去.

tsx 等 render 组件中获取的方式更简单

import { defineComponent, ref, onMounted } from "@vue/runtime-core";
import { ElForm } from "element-plus";

export default defineComponent({
  setup() {
    const $form = ref<InstanceType<typeof ElForm>>(null);

    onMounted(() => {
      $form.value?.validate; // 类型正确
    });

    return () => <ElForm ref={$form}></ElForm>;
  },
});

需要注意的是，如果使用 expose 暴露方法出去，无法获取到对应的类型，您需要自定义类型

<!-- Home.vue -->
<template>
  <MyForm :ref="$form" />
</template>

<script>
import { defineComponent, ref, onMounted } from '@vue/runtime-core'
import MyForm, { MyFormExpose } from '@/components/MyForm'
export default defineComponent({
  components: { MyForm }

  setup(){
    const $form = ref<InstanceType<typeof MyForm> & MyFormExpose>(null)

    onMounted(() => {
       $form.value?.validate // 类型正确
    })
  }
})
</script>

// 组件 MyForm
import { defineComponent, ref, onMounted } from "@vue/runtime-core";
import { ElForm } from "element-plus";

type ELEForm = InstanceType<typeof ElForm>;

// 在外界通过 ref 获取组件实例 请使用这个类型
export interface MyFormExpose {
  validate: ELEForm["validate"];
}

export default defineComponent({
  name: "MyForm",

  setup(props, { expose }) {
    const $form = ref<InstanceType<typeof ElForm>>(null);

    expose({
      validate: (callback) => $form.value?.validate(callback),
    } as MyFormExpose);

    return () => <ElForm ref={$form}></ElForm>;
  },
});