vue3中自定义组件使用v-model

vue2 中的v-model

v-model本质上是一个语法糖,如下代码

<input v-model="test">
<!--上面代码本质上就是下方代码-->
<input :value="test" @input="test = $event.target.value">

因此，对于一个带有 v-model 的组件（核心用法），它应该如下：

带有v-model的父组件通过绑定的value值（即v-model的绑定值）传给子组件，子组件通过 prop接收一个 value;
子组件利用oninput事件实时通过 $emit 触发父组件input 事件，并传入新值value给父组件；

父组件

<template><div><child v-model="msg" @input="msg = $event.target.value" /><!--<child :value="msg" @input="msg = $event.target.value" />--></div>
</template>
<script>
import child from './components/Child.vue'
export default {components: {child},data() {return {msg: ''}}
}
</script>

子组件child

<template><input type="text" :value="modelValue" @input="handleInput">
</template>
<script>
export default {name: 'Child',props:['value'],data() {return {modelValue: this.value}},methods: {handleInput(event) {this.$emit('input', event)}}
}

vue3中的 v-model

vue3中的v-model默认绑定的不是value，而是modelValue，接收的方法由input改为@update：modelValue。

<template><child v-model="msg" /><p>{{msg}}</p>
</template><script lang="ts">
import { defineComponent,ref} from 'vue';
import child from './components/child/index.vue'export default defineComponent({name: 'App',components:{child},setup(){const msg = ref('1')return{msg}}
});
</script>

<template><input type="text" :value="modelValue" @input="onInput">
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({name:'ChildInput',props:{modelValue:{type:String}},setup(props, context){const onInput = (e: Event) =>{context.emit('update:modelValue',e.target.value)}return{onInput}}
})
</script>

vue3中自定义组件使用v-model相关推荐

vue2、vue3中自定义v-model的使用和区别
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据.视图更新,v-model是一个语法糖,,我们可以 ...
补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决
项目场景: vue3中rrweb-player组件实现网页录屏功能问题描述提示:这里描述项目中遇到的问题: 录制的视频会重复记录录制中这个按钮的状态,每打开一次开始录制视频中就会多一个按钮,bug ...
手把手教你在 Vue3 中自定义指令
TienChin 项目前端是 Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来决定是否展示出来,如果用户具备相应的权限,那么就展示对应的按钮:如果用户不具备对应的权限,那么按钮 ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
vue中自定义组件的命名规则
问题 vue中自定义的组件名在html中字母大写会报错 html: js: 自定义的组件中字母可以大写,但是在html标签中,字母有大写的就会报错原因这是因为html中不区分大小写,所以在html ...
《十》微信小程序中自定义组件的组件模板和样式
组件 WXML 模板: 组件模板的写法与页面模板相同. 模板数据绑定: 与普通的 WXML 模板类似,可以使用数据绑定.  &l ...
vue中自定义组件“ directives “的常用功能
directives 可以全局使用以及组件内部定义使用 directives是什么? 注册自定义的指令 directives有什么作用? 对普通 DOM 元素进行底层操作,就会用到自定义指令 dire ...
vue3中的组件间通信
Vue3.0组件通信父给子传值 props $attrs给子组件传值 $parent provide / inject 子组件向父组件传递 emit 父给子传值 props 我们通过在父组件引用子组 ...
angular中自定义组件实现双向绑定
使用get,set关键字 get返回父组件变化后的值 set为组件值产生变化后父组件改变 import {Input, Output } from '@angular/core'; ........ ...

vue3中自定义组件使用v-model

vue3中自定义组件使用v-model相关推荐

最新文章

热门文章