AI 助理
备案控制台
开发者社区 云计算 文章 正文

Vue3+TypeScript学习笔记（二十二）

2023-04-13 85
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3深入v-model

本节主要探讨父子组件使用v-model绑定数据的方式。由于props是单向数据流，因此子组件不可能直接修改来自父组件的props，必须使用自定义事件的方式进行修改。不同的是事件名需要采用Vue3特定的格式update:v-model绑定变量的名字，回调由Vue3事先定义完毕
一个简单的例子：
App.vue

<template>
    <div>
        <div>我是App.vue父组件</div>
        {{ isShow }}
        <button @click="isShow = !isShow">开关</button>
        <br>
        {{ textValue }}
<!-- 这样的写法相当于v-model:value="isShow" -->
        <A v-model="isShow"></A>
        {{ bt }}
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'

let isShow = ref<boolean>(true)
</script>

<style scoped></style>

A.vue

<template>
    <div v-if="props.modelValue" class="box">
        <div>
            <div class="close"><button @click="close">关闭</button></div>
            <h3>我是v-model子组件</h3>
        </div>
    </div>
</template>

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

const props = defineProps<{
    // 组件身上的value默认名字是modelValue
    modelValue: boolean,
}>()

// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:modelValue'])

const close = () => {
    // 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
    emit('update:modelValue',false)
}
</script>

<style scoped>
.box {
    width: 500px;
    height: 200px;
    border: 5px solid #ccc;
}
.close {
    display: flex;
    flex-direction: row-reverse;
}
h3 {
    margin-top: 0;
}
button {
    margin: 10px 10px 0 0;
}
</style>

除了直接使用v-model外，我们也可以自定义绑定的变量名
App.vue

<template>
    <div>
        <div>我是App.vue父组件</div>
        {{ isShow }}
        <button @click="isShow = !isShow">开关</button>
        <br>
        {{ textValue }}
        <A v-model:text="textValue"></A>
        {{ bt }}
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'

let textValue = ref<string>('小满')
</script>

<style scoped></style>

A.vue

<template>
    <div v-if="props.modelValue" class="box">
        <div>
            <div class="close"><button @click="close">关闭</button></div>
            <h3>我是v-model子组件</h3>
        </div>
        <span>内容：</span><input type="text" @input="change" :value="props.text"/>
    </div>
</template>

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

const props = defineProps<{
    // 自定义参数名
    text:string,
}>()

// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:text'])

const close = () => {
    // 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
    emit('update:modelValue',false)
}

// 将input的value值回传给父组件
const change = (e:Event) => {
    const target = <HTMLInputElement>e.target
    emit('update:text',target.value)
}
</script>

<style scoped>
.box {
    width: 500px;
    height: 200px;
    border: 5px solid #ccc;
}
.close {
    display: flex;
    flex-direction: row-reverse;
}
h3 {
    margin-top: 0;
}
button {
    margin: 10px 10px 0 0;
}
</style>

此外，Vue3还支持自定义事件修饰符，其表示方法为props绑定的变量名+Modifiers，如果修饰符是可选的还要在后面加上?可选链操作符，具体例子如下：
App.vue

<template>
    <div>
        <div>我是App.vue父组件</div>
        {{ isShow }}
        <button @click="isShow = !isShow">开关</button>
        <br>
        {{ textValue }}
        <A v-model:bt.isBT="bt"></A>
        {{ bt }}
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'

let bt = ref<string>('默认的bt')
</script>

<style scoped></style>

A.vue

<template>
    <div v-if="props.modelValue" class="box">
        <div>
            <div class="close"><button @click="close">关闭</button></div>
            <h3>我是v-model子组件</h3>
        </div>
        <span>内容：</span><input type="text" @input="change" :value="props.text"/>
        <button @click="call">回传修饰符</button>
    </div>
</template>

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

const props = defineProps<{
    // v-model绑定的bt字符串变量
    bt:string
    // 自定义修饰符,因为是可选的,所以加上?操作符
    btModifiers?:{
        isBT:boolean    // true代表有isBT修饰符，false代表没有
    }
}>()

// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:bt'])

const close = () => {
    // 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
    emit('update:modelValue',false)
}

// 点击按钮给父组件返回数据。如果存在isBT修饰符就返回小满是BT,如果不存在就返回我是BT
const call = () => {
    // btbtModifiers仅判断修饰符是否存在,事件需要定义在bt身上
    emit('update:bt',props.btModifiers?.isBT ? '小满是BT' : props.bt)
}
</script>

<style scoped>
.box {
    width: 500px;
    height: 200px;
    border: 5px solid #ccc;
}
.close {
    display: flex;
    flex-direction: row-reverse;
}
h3 {
    margin-top: 0;
}
button {
    margin: 10px 10px 0 0;
}
</style>

完整代码：
App.vue

<template>
    <div>
        <div>我是App.vue父组件</div>
        {{ isShow }}
        <button @click="isShow = !isShow">开关</button>
        <br>
        {{ textValue }}
        <A v-model:bt.isBT="bt" v-model:text="textValue" v-model="isShow"></A>
        {{ bt }}
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'

let isShow = ref<boolean>(true)
let textValue = ref<string>('小满')
let bt = ref<string>('默认的bt')
// 第二十七章已看完,笔记尚未整理
</script>

<style scoped></style>

A.vue

<template>
    <div v-if="props.modelValue" class="box">
        <div>
            <div class="close"><button @click="close">关闭</button></div>
            <h3>我是v-model子组件</h3>
        </div>
        <span>内容：</span><input type="text" @input="change" :value="props.text"/>
        <button @click="call">回传修饰符</button>
    </div>
</template>

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

const props = defineProps<{
    // 组件身上的value默认名字是modelValue
    modelValue: boolean,
    // 自定义参数名
    text:string,
    
    // v-model绑定的bt字符串变量
    bt:string
    // 自定义修饰符,因为是可选的,所以加上?操作符
    btModifiers?:{
        isBT:boolean
    }
}>()

// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:modelValue','update:text','update:bt'])

const close = () => {
    // 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
    emit('update:modelValue',false)
}

// 将input的value值回传给父组件
const change = (e:Event) => {
    const target = <HTMLInputElement>e.target
    emit('update:text',target.value)
}

// 点击按钮给父组件返回数据。如果存在isBT修饰符就返回小满是BT,如果不存在就返回我是BT
const call = () => {
    // btbtModifiers仅判断修饰符是否存在,事件需要定义在bt身上
    emit('update:bt',props.btModifiers?.isBT ? '小满是BT' : props.bt)
}
</script>

<style scoped>
.box {
    width: 500px;
    height: 200px;
    border: 5px solid #ccc;
}
.close {
    display: flex;
    flex-direction: row-reverse;
}
h3 {
    margin-top: 0;
}
button {
    margin: 10px 10px 0 0;
}
</style>
关键词：
VUE.js typescript
TypeScript vue3
TypeScript学习笔记
vue3 TypeScript学习笔记
诺航同学
目录
相关文章
1313310884104708
|
3月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
1313310884104708
57 0
[译] 用 Typescript + Composition API 重构 Vue 3 组件
大树营养快线
|
1月前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
大树营养快线
47 6
小周sir
|
3月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
小周sir
47 3
小周sir
|
3月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
小周sir
64 1
土木林森
|
3月前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript：如何让前端开发既高效又安心？
【8月更文挑战第30天】在使用Vue.js构建前端应用时，结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集，通过添加静态类型检查帮助早期发现错误，减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript，并利用其类型系统提升代码质量。首先，使用Vue CLI创建支持TypeScript的新项目，然后构建一个简单的待办事项应用，通过定义接口描述数据结构并在组件中使用类型注解，确保代码符合预期并提供更好的编辑器支持。
土木林森
85 0
1313310884104708
|
3月前
|
JavaScript 前端开发 安全
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
1313310884104708
28 0
东方睿赢
|
3月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档：getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分，让开发者能在组件内访问实例。结合TypeScript，可通过定义组件实例类型实现更好的代码提示与类型检查，提升开发效率与代码质量。例如，定义一个带有特定属性（如myData）的组件实例类型，可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误，使开发更加高效和安全。
东方睿赢
148 0
CodeQi技术小栈
|
3月前
|
JavaScript 测试技术 API
Vue 3 与 TypeScript：最佳实践详解
Vue 3 与 TypeScript：最佳实践详解
CodeQi技术小栈
142 0
G0518
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript：增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript：增强JavaScript的类型安全性
G0518
48 0
代码bug生产队
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript：类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript：类型系统与实用技巧
代码bug生产队
65 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 4
    自制简单的range（Vue）
  • 5
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 6
    如何在VUE中播放RTSP 实时视频，延迟要小于300毫秒？
  • 7
    VueJS && ReactJS 如何？听听别人怎么说。
  • 8
    使用webstorm来创建并且运行vue项目详细教程
  • 9
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 10
    vue2与vue3的区别
  • 1
    TypeScript中的“as”语法是什么？
    39
  • 2
    TypeScript 学习笔记
    57
  • 3
    【Web 前端】TypeScript 中的接口是什么？
    72
  • 4
    【Web 前端】TypeScript 的内置数据类型有哪些？
    108
  • 5
    【Web 前端】使用 TypeScript 有什么好处？
    116
  • 6
    【Web 前端】TypeScript 的特点是什么？
    146
  • 7
    【Web 前端】什么是 TypeScript ？
    85
  • 8
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
    174
  • 9
    【JavaScript与TypeScript技术专栏】TypeScript如何帮助JavaScript开发者避免常见错误
    53
  • 10
    【JavaScript与TypeScript技术专栏】使用TypeScript优化JavaScript应用性能
    93

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战
  • JavaScript入门与实战

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 对象和接口-1：对象类型
  • 函数类型-1：基本语法
  • 常见类型-1：空，联合，枚举
  • 常见类型-2：数组和元组
  • 语言入门-2：基本类型
  • 语言入门-1：环境构建
    • 下一篇
    无影云桌面