您的当前位置:首页正文

vue如何在自定义组件中使用v-model

2023-12-08 来源:站点网
导读v-model 是 Vue2 中唯一支持双向绑定的指令,用于表单控件绑定,但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了, v-model 其实是个语法糖。 这不过是以下示例的语法糖: 也就是说,你只需要在组件中声明一个name为value的props,并且通过触发input事件传入一个值,就能修改这个value。 查看详情: demo demo里我保留了一些测试的东西,希望你能看的明白 如果绑定多个值的话,建议我们用object对象

v-model指令

所谓的“指令”其实就是扩展了HTML标签功能(属性)。

先来一个组件,不用vue-model,正常父子通信

<!-- parent --><template><div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child @returnBack="turnBack" :give="sthGiveChild"></Child></div></template><script>import Child from './Child.vue';export default { data() { return { sthGiveChild: '给你100块' }; }, components: { Child }, methods: { turnBack(val) { this.sthGiveChild = val; } }}</script>
<!-- child --><template><div class="child"> <p>我是儿子,父亲对我说: {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a></div></template><script>export default { props: { give: String }, methods: { returnBackFn() { this.$emit('returnBack', '还你200块'); } }}</script>

点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

改用v-model

<!-- parent --><template><div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child v-model="sthGiveChild"></Child></div></template><script>import Child from './Child.vue';export default { data() { return { sthGiveChild: '给你100块' }; }, components: { Child }}</script>
<!-- child --><template><div class="child"> <p>我是儿子,父亲对我说: {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a></div></template><script>export default { props: { give: String }, model: { prop: 'give', event: 'returnBack' }, methods: { returnBackFn() { this.$emit('returnBack', '还你200块'); } }}</script>

文案虽有不同,但是效果最终是一致的。

看看官方自定义组件的v-model

官方例子https://vuefe.cn/v2/api/#model

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

尝试把上边子组件的例子改一下,也是跑的通的

<!-- child --><template><div class="child"> <p>我是儿子,父亲对我说: {{value}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a></div></template><script>export default { props: { value: String }, methods: { returnBackFn() { this.$emit('input', '还你200块'); } }}</script>

做一下总结:

如果你懒,不想自己去处理事件,那就用默认的 'value' && 'input' 事件去处理,如果用原生事件的,甚至连model属性也可以省去。

如果你想自己的代码比较明确,区分出自定义事件,那么下面的组合才是你的菜。

prop和event看你自己心情定义,当然要知名见意【尽量避开关键字】

model: {prop: 'someProp', // 注意,是prop,不带s。我在写这个速记的时候,多写了一个s,调试到怀疑人生event: 'someEvent'}this.$emit('someProp', [returnValueToParent])

小编还为您整理了以下内容,可能对您也有帮助:

vue 自定义组件使用v-model

v-model 是 Vue2 中唯一支持双向绑定的指令,用于表单控件绑定,但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了, v-model 其实是个语法糖。

这不过是以下示例的语法糖:

也就是说,你只需要在组件中声明一个name为value的props,并且通过触发input事件传入一个值,就能修改这个value。

查看详情: demo

demo里我保留了一些测试的东西,希望你能看的明白

如果绑定多个值的话,建议我们用object对象类型,Array数组类型,也就是说我们接收的value类型需要改变下。

props的验证类型建议也看看: props的验证类型

Vue - 指令 - (v-model)

v-model
预期:随着表单控件类型不同而不同。
*:

修饰符:

使用方法:
在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

参考:

使用的地方:

双向绑定的实质:

这不过是以下示例的语法糖:

所以在组件中使用时,它相当于下面的简写:

所以要让组件的 v-model 生效,它应该 (从 2.2.0 起是可配置的):

我们来看一个非常简单的货币输入的自定义控件:

5.自定义组件的 v-model

默认情况下,一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突:

Vue - 指令 - (v-model)

v-model
预期:随着表单控件类型不同而不同。
*:

修饰符:

使用方法:
在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

参考:

使用的地方:

双向绑定的实质:

这不过是以下示例的语法糖:

所以在组件中使用时,它相当于下面的简写:

所以要让组件的 v-model 生效,它应该 (从 2.2.0 起是可配置的):

我们来看一个非常简单的货币输入的自定义控件:

5.自定义组件的 v-model

默认情况下,一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突:

Vue 的组件是如何进行双向数据绑定的?

在 Vue 中,组件之间的双向数据绑定可以通过 v-model 实现。v-model 可以用于表单输入、组件值、属性等元素上,它实现了父组件和子组件之间的双向数据绑定。当父组件的值改变时,子组件的值也会随之改变;当子组件的值改变时,父组件的值也会随之改变。

Vue中v-model基本使用

结果:

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入,然后更新数据。

v-model本质上是个语法糖,其实现原理包含两个步骤

v-on:input="" 用于动态监听用户输入的信息,在界面上产生一个事件后,浏览器会生成一个event对象,这个event对象就包含了输入的信息

除了上面的文本类型,v-model还能结合其他类型使用

结果:

结果:

结果:

结果:

v-model在默认情况下同步了输入框的数据,就是说输入框数据一有改变,对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新

默认情况下,输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。

trim修饰符可以去掉从输入框获取的内容的左右两边的空格

Vue中v-model基本使用

结果:

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入,然后更新数据。

v-model本质上是个语法糖,其实现原理包含两个步骤

v-on:input="" 用于动态监听用户输入的信息,在界面上产生一个事件后,浏览器会生成一个event对象,这个event对象就包含了输入的信息

除了上面的文本类型,v-model还能结合其他类型使用

结果:

结果:

结果:

结果:

v-model在默认情况下同步了输入框的数据,就是说输入框数据一有改变,对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新

默认情况下,输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。

trim修饰符可以去掉从输入框获取的内容的左右两边的空格

(Vue -05) v-model指令 + 绑定事件 + 深度响应式

Vue官方-表单输入绑定

v-model指令,绑定文本框的内容,实现双向数据绑定。

v-model指令,绑定多行文本框的内容,实现双向数据绑定。

绑定一组单选框,每个单选框指定相同的name属性。

下拉框,绑定一个数组。

单选时:

多选时 (绑定到一个数组):

下拉框设置multiple属性后,按住ctrl就可以选择多个项

在默认情况下, v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步:

@ 是 v-on: 的简写,通过 v-on: 指令绑定事件,指定一个, methods 选项,里面的,定义的,方法。

Vue官方-事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

.stop 用于阻止事件冒泡

.prevent 用于阻止默认行为

.self 只能在自身元素上触发,不能在子元素身上触发触发的

.once 点击事件将只会触发一次

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

.enter 只有在回车时,才会调用事件方法

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

obj对象里面的每一个属性,都会采用Object.defineProperty去封装,实现响应式。

所谓响应式,指的是,数据发生变化后,页面自动更新。

给对象,后添加的数据不会采用Object.defineProperty去封装,所以,就失去了响应式。

vue通过 $set 方法,给对象添加响应式属性 this.$set(this.obj,'sex','男')

vue通过 $delete 方法,删除对象的属性,并触发响应式 this.$delete(this.obj,'age')

在vue中,操作数组,并触发页面更新只能使用数组的以下方法:

push,pop,unshift,shift,splice,resolve,sort

=>>> this.arr.push(66) this.arr.splice(2,1)

如果想通过下标操作数组,也必须要使用 $set 和 $delete 方法,

=>>> this.$set(this.arr,5,66) this.$delete(this.arr,2)

v-model在组件中如何使用?

v-model在组件中如何使用。
实现点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

<!-- 父组件 --> <template> <p class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child v-model="sthGiveChild"></Child> </p> </template> <script> import Child from './Child.vue'; export default { data() { return { sthGiveChild: '给你100块' }; }, components: { Child } } </script>

<!-- 子组件 --> <template> <p class="child"> <p>我是儿子,父亲对我说: {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a> </p> </template> <script> export default { props: { give: String }, model: { prop: 'give', event: 'returnBack' }, methods: { returnBackFn() { this.$emit('returnBack', '还你200块'); } } } </script>

默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。by三人行慕课

v-model在组件中如何使用?

v-model在组件中如何使用。
实现点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

<!-- 父组件 --> <template> <p class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child v-model="sthGiveChild"></Child> </p> </template> <script> import Child from './Child.vue'; export default { data() { return { sthGiveChild: '给你100块' }; }, components: { Child } } </script>

<!-- 子组件 --> <template> <p class="child"> <p>我是儿子,父亲对我说: {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a> </p> </template> <script> export default { props: { give: String }, model: { prop: 'give', event: 'returnBack' }, methods: { returnBackFn() { this.$emit('returnBack', '还你200块'); } } } </script>

默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。by三人行慕课

vue中如何避免重复v-model

1、将v-model分解为计算属性和监听属性,在计算属性中进行逻辑处理。

2、在多个组件中使用相同的v-model逻辑,将这些逻辑封装到一个自定义组件中,以便重复使用。

3、在父组件中使用自定义组件,直接使用v-model指令来绑定数据。

4、父组件中对value的修改会自动传递给子组件,子组件对value的修改也会自动反映到父组件中。

vue警告: Invalid event arguments: event validation failed for event" input"

Vue警告“Invalid event arguments: event validation failed for event "input"”通常意味着在Vue组件中绑定的input事件的参数传递出现了问题。这个警告通常发生在使用v-model指令或@input事件绑定时。

这个问题可能有以下几个常见原因:

在input事件中使用了自定义的参数:Vue的v-model指令和@input事件默认情况下只接受一个参数,也就是输入框的值。如果在事件处理程序中尝试传递其他参数,就会触发这个警告。确保只传递输入框的值即可,不要传递额外的参数。

在input事件中使用了事件修饰符:事件修饰符(比如:.prevent、.stop、.capture等)只能在普通的事件绑定上使用,而不能在v-model指令上使用。如果在v-model指令中使用了事件修饰符,就会触发这个警告。确保在v-model指令中不包含事件修饰符。

在自定义组件中未正确使用v-model:如果你正在使用自定义组件,并尝试在组件中使用v-model双向绑定数据,那么请确保你的组件正确定义了value属性和input事件。详细请参考Vue的自定义组件开发文档。

综上所述,如果你遇到了Vue警告“Invalid event arguments: event validation failed for event "input"”,请检查你的代码是否存在上述问题,并对其进行修正。

站点网还为您提供以下相关内容希望对您有帮助:

vue 自定义组件使用v-model

v-model 是 Vue2 中唯一支持双向绑定的指令,用于表单控件绑定,但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了, v-model 其实是个语法糖。这不过是以下示例的语法糖:也就是说...

v-model在组件中如何使用?

-- 父组件 --&gt; &lt;template&gt; 我是父亲, 对儿子说: {{sthGiveChild}} &lt;Child v-model="sthGiveChild"&gt;&lt;/Child&gt; &lt;/template&gt; import Child from './Child.vue'; export default { data() { ret...

Vue中v-model基本使用

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入,然后更新数据。v-model本质上是个语法糖,其实现原理包含两个步骤 v-on:input="" 用于动态监听用户输入的信息,在界面上产生一个事件后,浏览器会...

Vue之model属性

1、 https://cn.vuejs.org/v2/api/#model 允许一个自定义组件在使用v-model时定制 prop 和 event。默认情况下,一个组件上的v-model会把value用作 prop 且把input用作 event,但是一些输入类型比如单选框和复选框...

如何使用vue.js构造modal组件

使用vue.js构造modal组件的方法是使用 v-model 指令:v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。比如,多个勾选框,绑定到同一个数组: Jack John ...

Vue 的组件是如何进行双向数据绑定的?

在 Vue 中,组件之间的双向数据绑定可以通过 v-model 实现。v-model 可以用于表单输入、组件值、属性等元素上,它实现了父组件和子组件之间的双向数据绑定。当父组件的值改变时,子组件的值也会随之改变;当子组件的值改变...

vue3.x script setup实现v-model父子组件双向绑定

通过使用v-model实现双向绑定,v-model默认的props是value可以单独声明然后通过 v-model:声明的值 的方式添加 通过该方法就可以在父元素调用组件通过v-model实现数据双向绑定,该方法只能绑定一个变量 如果不需要多余的操作...

Vue3 v-model 语法糖

v-model的本质是属性绑定和事件绑定的结合,可以在标签上使用也可以在组件上使用 vue2 中  v-model实质是自定义属性:value和@input自定义事件 event有两层含义:1. 如果是 原始DOM 的事件,那么$event表示 js的...

如何利用Vue.js库中的v-model绑定表单中的数据

vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍:v-model这个指令只能用在, ,&lt;textarea&gt;这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的...

vue中如何避免重复v-model

1、将v-model分解为计算属性和监听属性,在计算属性中进行逻辑处理。2、在多个组件中使用相同的v-model逻辑,将这些逻辑封装到一个自定义组件中,以便重复使用。3、在父组件中使用自定义组件,直接使用v-model指令来绑定数据...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top