v-model 可以被用在自定义组件上吗？如果可以，如何使用？

Lcyj9994399

关注

最新推荐文章于 2024-09-30 10:50:08 发布 · 642 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

前端面试题 —— Vue （三）前端vue面试题阅读详情

可以。

v-model 实际上是一个语法糖，如：

<input v-model="searchText">

实际上相当于：

<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>

用在自定义组件上也是同理：

<custom-input v-model="searchText">

相当于：

<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>

显然，custom-input 与父组件的交互如下：
1父组件将searchText变量传入custom-input 组件，使用的 prop 名为value；
2custom-input 组件向父组件传出名为input的事件，父组件将接收到的值赋值给searchText；
所以，custom-input 组件的实现应该类似于这样：

Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})

收录于

当前文章被以下社区和专栏收录：

标签

#vue.js #前端 #javascript

vue基础笔试题 ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。............... 阅读详情

相关推荐

Vue中自定义组件上使用v-model

自定义组件上使用v-model

weixin_62189802的博客 1万+

v-model 可以被用在自定义组件上吗？如果可以，如何使用？data为什么是一个函数而不是对象

dadwdDW的博客 196

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

vue 自定义组件中使用 v-model v-model 简单认识 v-model 是 vue 用于数据双向绑定的一个指令。其实它是一个语法糖，本质上包含两个操作： v-bind 绑定一个 value 属性 v-on 指令给当前元素绑定 input 事件即 <input type="text" v-model="message" /> 等同于 <input type="text" v-bind:value="message" v-on:input="message=$e

u010671652的专栏 2047

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

自定义组件v-model使用

Chase 学习专栏 2514

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

v-model是数据双向绑定，下面用input说明： &lt;input type="text" v-model="price"&gt; &lt;input type="text" :value="price" @input="price=$event.target.value"

weixin_44383184的博客 1032

Vue自定义组件使用v-model指令

基本概念与作用v-model 指令自定义组件与v-model示例一：基本的自定义组件v-model实现示例二：使用v-model处理复杂组件示例三：使用自定义事件名称示例四：处理多个属性的双向绑定使用技巧与分析在Vue.js中，v-model指令提供了一种便捷的方式来实现表单控件与Vue实例之间的双向数据绑定。然而，v-model默认仅适用于原生的HTML表单控件，如和。对于自定义组件而言，我们需要手动实现与v-model。

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！ 2994

前端Vue篇之v-model 是如何实现的，语法糖实际是什么？v-model 可以被用在自定义组件上吗？如果可以，如何使用？

v-model 是Vue提供的指令，用于在表单元素和组件上实现双向数据绑定。它实际上是一个语法糖，可以简化对数据的读写操作。在原生HTML元素上，v-model相当于给元素绑定value属性和input事件。对于自定义组件，可以通过model选项来实现v-model的双向绑定，确保组件和父组件之间的数据同步。

星辰迷上大海的博客 3817

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

以上的形式用在案例中是会报错的，因为mySelectValue是用在v-model上的，也就是会修改mySelectValue的值，给子组件，子组件接收value值，同时通过input事件传递参数给父组件；自定义组件中使用了v-model，默认自定义属性名是。使用v-model实际上是传递一个自定义属性。// 通过调用父组件的input事件来传递值。对象形式定义的属性，允许修改，不会报错；// 父组件传递过来的value。'v-model的值为：'

m0_50441807的博客 1908

v-model的原理，以及自定义组件使用v-model

m0_47195133的博客 1486

自定义组件使用v-model

最近项目需要封装一些组件，结合自己的开发风格，想让组件尽可能的高复用、低耦合、操作简单，就对自定义组件使用了v-model，在组件内部处理模块逻辑，与调用环境的状态数据实现双向绑定以下就是我在自定义组件中使用v-model的一些关键知识案例代码 <template> <div class="my-input-comp"> <i...

Beamon__的博客 839

vue 自定义组件使用 v-model 属性

vue 自定义组件使用 v-module 属性在 vue 中使用 v-module 可以同步更新视图和数据源的值，常用于输入框（输入框可视为组件），输入后直接同步了 data 的值在自定义组件中使用 v-module 同步组件和 data 的值。以首页全屏广告为例： 自定义组件先定义一个组件，接收一个show参数。页面内需要加上 model。页面点击后，触发model 绑定的方法，修改对...

Jioho的博客 3923

前端（vue面试题总结）

1. Vue 实例的 data 属性，可以在哪些生命周期中获取到？ A. beforeCreate B. created C. beforeMount D. mounted (b,c,d) 2. 下列对 Vue 原理的叙述，哪些是正确的？ A. Vue 中的数组变更通知，通过拦截数组操作方法而实现 B. 编译器目标是创建渲染函数，渲染函数执行后将得到 VNode 树 C. 组件内 data 发生变化时会通知其对应 watcher，执行异步更新 D. patching 算法首先进行同层级比较，可

wp456789的博客 7284

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

brilliantSt的博客 1405

自定义组件v-model的使用

自定义组件v-model的使用首先 v-model是语法糖他的实际意义是这样的 <input :value="value" @input="value= $event.target.value" /> 然后等价于 <input v-model="value"/> 由此我们可以想我们是不是也可以在自定义组件中使用v-model呢？是的，接下来我们演示一下父组件中 <template> <div class="s_process_line_tw

qq_37915717的博客 1057

vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持

在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。

在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。 1万+

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

文章属于速记，有错误欢迎指出。风格什么的不喜勿喷。先来一个组件，不用vue-model，正常父子通信我是父亲, 对儿子说： {{sthGiveChild}}import Child from './Child.vue';export default {data() {return {sthGiveChild: '给你100块'};},components: {Child},methods: {tu...

weixin_39834328的博客 210

小白学习Vue(?)--model选项的使用（自定义组件文本框双向绑定）

1. model选项： v-model在普通dom的表单标签上使用可以实现双向绑定，但在自定义组件标签中就不行，其要实现双向绑定需要model选项来实现理解这个属性，可以很好的理解v-model的绑定原理，可以对照v-model的使用来浏览本文 1.1. <input>文本框刚开始加载时，<span>标签取的{{name}}是vue实例的属性值，所以会显示bbb 而渲染子组件时，子组件绑定的value是子组件中data的value，所以会显示aaa 输入时，输