前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >关于 Vue3 + setup + ts 使用技巧的总结

关于 Vue3 + setup + ts 使用技巧的总结

作者头像
前端达人
发布于 2023-08-31 00:42:13
发布于 2023-08-31 00:42:13
1.1K00
代码可运行
举报
文章被收录于专栏：前端达人前端达人
运行总次数：0
代码可运行
关联问题
换一批
1. 组件引入

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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <Child />
</template>

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

2. ref 和 reactive

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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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 获取父组件传过来值和事件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
// 第一种不带默认值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 获取插槽的内容。

父组件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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>

子组件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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>

使用自定义指令

在 setup 里边自定义指令的时候，只需要遵循vNameOfDirective 这样的命名规范就可以了

比如如下自定义 focus 指令，命名就是 vMyFocus，使用的就是 v-my-focus

自定义指令

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script setup lang="ts">
const vMyFocus = {
  onMounted: (el: HTMLInputElement) => {
    el.focus();
    // 在元素上做些操作
  },
};
</script>
<template>
  <input v-my-focus value="111" />
</template>

5. 使用 defineExpose 子组件传父组件

子组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="child"></div>
</template>

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

function doSth() {
  console.log(333);
}

defineExpose({ doSth });
</script>

父组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="father" @click="doSth1">222</div>
  <Child ref="childRef"></Child>
</template>

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

import Child from "./Child.vue";

const childRef = ref();

function doSth1() {
  childRef.value.doSth();
}
</script>

6. 父组件传子组件

父组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="father"></div>
  <Child @doSth="doSth"></Child>
</template>

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

import Child from "./Child.vue";

function doSth() {
  console.log(112);
}
</script>

子组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="child">2222</div>
</template>

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

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

onMounted(() => {
  emits("doSth");
});
</script>

7. toRefs

当从父组件向子组件传 props 的时候，必须使用 toRefs 或者 toRef 进行转一下，这是为什么呢？

这里是因为如果不使用 toRefs 转一次的话，当父组件中的 props 改变的时候，子组件如果使用了 Es6 的解析，会失去响应性。

可以看下如下例子

父组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="father" @click="changeVal">{{ fatherRef }}</div>
  <Child :fatherRef="fatherRef"></Child>
</template>

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

import Child from "./Child.vue";

const fatherRef = ref(1);

function changeVal() {
  fatherRef.value = 2;
}
</script>

<style lang="scss" scoped>
.father {
  margin-bottom: 40px;
}
</style>

子组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="child" @click="changeVal">{{ fatherRef }}</div>
</template>

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

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

const { fatherRef } = props;

function changeVal() {
  fatherRef.value = 34;
}
</script>

可以看到当父组件如果点击之后，因为使用 const { fatherRef } = props;进行解析，就失去了响应性

所以当父组件变成 2 的时候，子组件还是 1。

这里有两种解决办法

  1. 使用 const { fatherRef } = toRefs(props);
  2. 在模版中中使用 props.fatherRef

8. 子组件使用 v-model

8.1 可以在子组件中使用 computed，实现双向绑定

父组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="father">{{ fatherRef }}</div>
  <Child :fatherRef="fatherRef" @changeVal="changeVal"></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;
}
</style>

子组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <!-- <div class="child">{{ props.fatherRef }}</div> -->
  <input type="text" v-model="inputVal" />
</template>

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

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

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

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

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

8.2 可以从父组件传递值和改变值的方法，然后子组件也可以使用 v-model

例子中父组件传递 modelValue 和 update:modelValue 方法 父组件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <Child :modelValue="searchText" @update:modelValue="changeVal"> </Child>
</template>

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

import Child from "./Child.vue";

const searchText = ref(1);

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

<style lang="scss" scoped>
.father {
  margin-top: 40px;

  margin-bottom: 40px;
}

.btn {
  font-size: 20px;

  color: red;
}
</style>

子组件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <!-- <div class="child">{{ props.fatherRef }}</div> -->
  <!-- <div v-bind="attrs">
        <slot name="test1">11</slot>
        <input type="text" v-model="inputVal" />
    </div> -->
  <input v-model="modelValue" />
</template>

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

const props = defineProps<{
  modelValue: number;
}>();

// const emits = defineEmits(["changeVal"]);
</script>

9. 递归组件

组件本身是可以调用组件自身的，也就是递归。vue3 中使用文件名称自动注册为组件的名称，比如名为 Child.vue 的组件可以在其模板中用 <Child/> 引用它自己。这里需要注意的是需要设置条件语句，用来中断递归，不然递归会无限递归下去。

父组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <Child :modelValue="searchText" @update:modelValue="changeVal"> </Child>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const searchText = ref(1);
function changeVal(val: number) {
  searchText.value = val;
}
</script>

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

子组件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <input v-model="modelValue" />
  <Child
    :modelValue="test"
    @update:modelValue="changeTest"
    v-if="modelValue > 2"
  ></Child>
</template>

<script setup lang="ts">
import { computed, useAttrs, useSlots, ref } from "vue";
const props = defineProps<{
  modelValue: number;
}>();
const test = ref(0);
function changeTest(val: number) {
  test.value = val;
}

// const emits = defineEmits(["changeVal"]);
</script>

<style lang="scss" scoped>
.child {
  position: relative;
}
</style>

10. vue3 ts 获取组件 ref 实例

  • 通过ref直接拿到dom引用
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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引用
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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引用放到数组中

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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 组件中获取的方式更简单
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
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 暴露方法出去，无法获取到对应的类型，您需要自定义类型 github.com/vuejs/rfcs/…[1]

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
// 组件 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>;
  },
});
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!-- 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>

参考资料

[1]

https://github.com/vuejs/rfcs/pull/210#issuecomment-727067392: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Frfcs%2Fpull%2F210%23issuecomment-727067392

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2023-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除
ref
script
vue3
递归
技巧

本文分享自 前端达人 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

ref
script
vue3
递归
技巧
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
前端系列第10集-实战篇
script泛型服务器前端数据
如果直接渲染1W行列表，不出意外你的页面就要卡了，比较常见的优化方案就是虚拟滚动，就是只渲染你能看到的视窗中的几十行，然后通过监听滚动来更新这几十个dom
达达前端
2023/10/08
2720
前端系列第10集-实战篇
前端系列14集-Vue3-setup
vue3对象函数前端数据
页面浏览量（Page View，PV）和访客数（Unique Visitors，UV）
达达前端
2023/10/08
5160
前端系列14集-Vue3-setup
Vue2到Vue3，重学这5个常用的API
apivue.js
距离Vue3发布已经过去一年多时间了，从Vue2到Vue3是一个不小的升级，包括周边生态等。
玄姐谈AGI
2023/01/10
9100
Vue2到Vue3，重学这5个常用的API
Vue3 script-setup 使用指南
vue.jsidecssapitypescript
本文主要是讲解 <script setup> 与 TypeScript 的基本使用。
ConardLi
2022/02/18
5.9K0
Vue3, setup语法糖、Composition API全方位解读
vue.jsapinode.jsjavascript
支持绑定多个v-model，v-model 是 v-model:modelValue 的简写
yyds2026
2022/09/26
3.2K0
【Vue3】都2022年了！你还没有感受过 Setup 语法糖的魅力吗？！
automodelreturnscriptvue3
众所周知，Vue3中我们需要通过setup()函数进行return，setup语法糖解决了这个冗余的问题，在我司的这个项目中也是用到了 setup语法糖 + Ts，说实在的，咱就是说整个一个被香到了，感谢那些参与Vue3文档翻译工作的同学们，栓Q。
HoMeTown
2022/10/26
7020
Vue3 过10种组件通讯方式
javascriptvue.js
众所周知，Vue.js 中一个很重要的知识点是组件通信，不管是业务类的开发还是组件库开发，都有各自的通讯方法。
德育处主任
2022/04/17
2K0
Vue3 过10种组件通讯方式
学会这几个API，vue3直接上手
apinode.js
vue2开发过项目的，想直接上手vue3很快，几个API熟悉了就够了，其它的特性在使用vue3的过程慢慢去了解。任何在熟悉了使用之后再去研究一些API的原理，慢慢就能把vue3掌握。
wade
2022/03/28
7080
Vue3.0最新动态：script-setup 定稿，部分实验性 API 将弃用
apitypescriptvue.jshttps网络安全
最近一段时间挺忙，对 Vue 3.0 的更新记录看的比较少，今天看了一下 release 记录，发现最新的 2 个小版本对 script-setup 这个新特性改动还算蛮大的，之前的用法都调整了不少。
winty
2021/07/27
1.4K0
🎉一个demo体验Vue3.3+TypeScript所有新功能🎉
前端javascriptvue.js
由于最新的功能defineModel是实验特性，需要在vite.config.js里开启，另外需要开启解构props响应式功能
萌萌哒草头将军
2023/06/18
6000
🎉一个demo体验Vue3.3+TypeScript所有新功能🎉
Vue 3 父子组件互调方法 - setup 语法糖写法
编译测试语法官方文档script
使用 <script setup> 的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
訾博ZiBo
2025/01/06
3690
Vue 3 父子组件互调方法 - setup 语法糖写法
Vue & Element
渲染vue.jsjavascript
Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写。Vue 基于 MVVM(Model-View-View-Model) 思想，实现数据的双向绑定，将编程的关注点放在数据上。
小简
2023/01/04
5.7K0
Vue & Element
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
vue.jshttps网络安全typescripthtml
最近入门 Vue3 并完成 3 个项目，遇到问题蛮多的，今天就花点时间整理一下，和大家分享 15 个比较常见的问题，基本都贴出对应文档地址，还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发，因此主要分几个方面总结：
pingan8787
2022/04/14
6.5K0
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
前端系列15集-watch，watchEffect，eventBus
eventbuswatch对象函数前端
watchEffect，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
达达前端
2023/10/08
5330
vue3.0 sfc 中 setup 的变化
vue.js
在vue中，sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式，它允许将 Vue 组件中的模板、逻辑 与 样式封装在单个文件中。
玖柒的小窝
2021/10/05
5640
Vue3 Composition API 之 setup 函数
apivue.js
在说 Vue3 之前，我们先看看 Vue2 项目中是如何编写逻辑代码的， 新建一个组件
青年码农
2022/12/13
4700
Vue3 Composition API 之 setup 函数
Vue3学习笔记
vue.js编程算法typescript
setup等同于原data，通过reactive定义变量病赋值到data，再return出去，就可以在template用双大括号使用，计算特性：doublecounter的定义，注意需要import computed
kif
2023/03/10
1.2K0
Vue 组件间通信的几种方式
vue.jsapi
Vue 遵循单向数据流的原则，状态会从父组件传递给子组件，避免子组件意外改变父组件状态导致的混乱逻辑。
前端西瓜哥
2022/12/21
2K0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化
typescriptcrmvue3系统语法
vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：
HelloWorldZ
2024/03/20
5380
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化
【初学者笔记】整理的一些Vue3知识点
编程算法api
拒绝标题党，哈哈哈，看完你就基本可以上手搞开发了，本文适合Vue初学者，或者Vue2迁移者，当然还是建议Vue3官网完全过一遍。不适合精通原理，源码的大佬们。
一尾流莺
2022/12/10
2.4K0
【初学者笔记】整理的一些Vue3知识点
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪多租户的 4 种常用方案亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？60页PPT全解：DeepSeek系列论文技术要点整理
相关讨论
vue3/ts/jest/axios,如何模拟方法内的axios进行测试？setup.py卸载？什么是setup.py？
相关课程
轻量应用构建训练营AI代码助手快速上手训练营前端
前端系列第10集-实战篇
2720
前端系列14集-Vue3-setup
5160
Vue2到Vue3，重学这5个常用的API
9100
Vue3 script-setup 使用指南
5.9K0
Vue3, setup语法糖、Composition API全方位解读
3.2K0
【Vue3】都2022年了！你还没有感受过 Setup 语法糖的魅力吗？！
7020
Vue3 过10种组件通讯方式
2K0
学会这几个API，vue3直接上手
7080
Vue3.0最新动态：script-setup 定稿，部分实验性 API 将弃用
1.4K0
🎉一个demo体验Vue3.3+TypeScript所有新功能🎉
6000
Vue 3 父子组件互调方法 - setup 语法糖写法
3690
Vue & Element
5.7K0
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
6.5K0
前端系列15集-watch，watchEffect，eventBus
5330
vue3.0 sfc 中 setup 的变化
5640
Vue3 Composition API 之 setup 函数
4700
Vue3学习笔记
1.2K0
Vue 组件间通信的几种方式
2K0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化
5380
【初学者笔记】整理的一些Vue3知识点
2.4K0
相关推荐
前端系列第10集-实战篇
更多 >
AI科技大本营0
LV.0
这个人很懒，什么都没有留下～
文章
3.1K
获赞
12.5K
专栏
1
目录
  • 2. ref 和 reactive
  • 3. defineEmits 和 defineProps 获取父组件传过来值和事件
  • 4. 使用 useAttrs 和 useSlots
  • 使用自定义指令
  • 5. 使用 defineExpose 子组件传父组件
  • 6. 父组件传子组件
  • 7. toRefs
  • 8. 子组件使用 v-model
    • 8.1 可以在子组件中使用 computed，实现双向绑定
    • 8.2 可以从父组件传递值和改变值的方法，然后子组件也可以使用 v-model
  • 9. 递归组件
  • 10. vue3 ts 获取组件 ref 实例
    • 参考资料
加入讨论
的问答专区 >
Delphi Shen0
相关课程
一站式学习中心 >
轻量应用构建训练营
2925人在学
云服务器
轻量应用服务器
云计算
AI代码助手快速上手训练营
1851人在学
腾讯云代码助手
前端
1263人在学
前端
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
3
目录