Vue3+TypeScript学习笔记(二十二)

简介: 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>
AI 代码解读

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>
AI 代码解读

除了直接使用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>
AI 代码解读

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>
AI 代码解读

此外,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>
AI 代码解读

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>
AI 代码解读

完整代码:
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>
AI 代码解读

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>
AI 代码解读
目录
打赏
0
0
0
0
2
分享
相关文章
一夜获千星!已获 1.7k+,Art Design Pro:Vue3 + Vite + TypeScript 打造的高颜值管理系统模板,这个让后端小哥直呼救命的后台系统
Art Design Pro 是一款基于 Vue 3、Vite 和 TypeScript 的高颜值后台管理系统模板,已获 1.7k+ 星标。项目专注于用户体验与视觉设计,支持主题切换、多语言、权限管理及图表展示等功能,内置常用业务组件,便于快速搭建现代化管理界面。其技术栈先进,开发体验流畅,适配多设备,满足企业级应用需求。项目地址:[GitHub](https://github.com/Daymychen/art-design-pro)。
245 11
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
119 22
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
336 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Gzm Design:开源神器!用 Vue3、Vite4、TypeScript 革新海报设计,免费开源的海报设计器,主流技术打造,轻松高效
海报设计在各个领域都有着广泛的应用,无论是商业广告、活动宣传还是个人创意表达。今天要给大家介绍一款免费开源的海报设计器——Gzm Design,它基于最新的主流技术开发,为用户提供了丰富的功能,让海报设计变得轻松又高效。
285 64
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
362 0
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
246 82
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
150 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问