01-组件上使用v-model

已于 2022-03-04 11:01:12 修改
阅读量194 收藏
点赞数
文章标签： html javascript linq
于 2022-03-04 11:00:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fleeno/article/details/123271966
版权
本文通过一个示例展示了如何在Vue中创建自定义组件并使用v-model进行双向数据绑定。文中详细解释了组件props的设置、@input事件监听以及如何通过$emit更新父组件的数据。例子中创建了两个my-input组件，分别绑定了'user'和'age'属性，并在页面上显示了这两个值。
摘要由CSDN通过智能技术生成

<body>
    <div id="app">

          <!-- 在 组件上 使用 v-model 
            如果 input 属性 是 text 或者 textarea 元素
            组件中 props 必须是 value 
            emit 事件名 必须是  input
        -->
        <my-input v-model="user"></my-input>
        <my-input v-model="age"></my-input>

        {{ user }}  --- {{ age}}
    </div>

    <script>

        Vue.component("MyInput",{
            props:['value'],
            template:`
                 <input type="text" :value="value" @input="fn($event)">
            `,
            methods: {
                fn(e){
                    // console.log(e.target.value)
                    this.$emit("input",e.target.value)
                }
            },
        })
        new Vue({
            el:"#app",
            data:{
               user:"gao" ,
               age:19
            }
          
        })
    </script>

fleeno
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-09 1万+
在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。
Vue----组件上的 v-model
emmmm.....
04-25 6654
文章目录1 组件上使用 v-model2 在组件上使用 v-model 的步骤2.1 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件2.2 子组件中，通过 props 接收父组件传递过来的数据2.3 在 v-bind: 指令之前添加 v-model 指令2.4 在子组件中声明 emits 自定义事件，格式为 update:xxx2.5 调用 $emit() 触发自定义事件，更新父组件中的数据2.6 完整代码 1 组件上使用 v-model v-model 是双向数据绑定指令，当需要维护组
Vue.js组件（4）：组件 v-model
最新发布
游王子的博客
06-06 1124
v-model可以在组件上使用以实现双向绑定。父组件可以用v-model返回的值是一个 ref。.valuev-model这意味着你也可以用v-model把这个 ref 绑定到一个原生 input 元素上，在提供相同的v-model。
在组件上使用 v-model
前端精髓
04-17 6526
自定义事件也可以用于创建支持` v-model` 的自定义输入组件。
Vue中自定义组件上使用v-model
weixin_62189802的博客
05-28 1万+
自定义组件上使用v-model
Vue组件中的v-model（深入解析）
nibabaoo的博客
04-02 2447
这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。
Vue v-model组件封装(类似弹窗组件)
10-15
在父组件中，我们可以直接使用 `v-model` 来控制这个弹窗组件： ```html <v-model v-model="value"></v-model> 点击显示 点击消失 import VModel from "./Vmodel" export default { components: { ...
vue中使用v-model完成组件间的通信
10-16
vue中有一个很神奇的东西叫v-model，它可以完成我们的需求。，本文重点给大家介绍vue中使用v-model完成组件间的通信,需要的朋友可以参考下
vue中的v-model原理,与组件自定义v-model详解
10-14
在Vue中，`v-model`实际上是一个语法糖，它背后是通过`:value`属性来设置元素或组件的值，并通过`@input`事件监听值的变化，当值变化时更新数据。 当我们使用`v-model`在`<input>`元素上时，例如： ```html <input ...
详解vue 自定义组件使用v-model 及探究其中原理
10-16
总结来说，Vue中的v-model指令在自定义组件上的使用，主要依赖于子组件对value prop的响应以及对input事件的触发。父组件通过v-model指令将数据绑定到子组件，并监听子组件发射的input事件来更新自身的数据。这背后...
vue如何在自定义组件中使用v-model
08-27
本篇文章主要介绍了 Vue 框架中如何在自定义组件中使用 v-model 指令，实现父子组件之间的数据通信。 知识点1：指令的概念 在 Vue 框架中，指令是一种扩展了 HTML 标签功能的特殊属性。v-model 指令就是一种特殊的...
Vue3: v-model
Everglow___的博客
04-18 1万+
Vue 有一些内置的修饰符，比如 .trim、.lazy 和 .number。在某些场景下，我们可以使用自定义修饰符。我们在组件上的 v-model中使用修饰符时，父组件会向子组件传递 一个props：，这个属性名也是固定的，这个属性是一个对象，我们可以在这个对象中访问到这个修饰符。这个props默认是一个空对象。比如下面的栗子中，modelModifiers的值是 {capitalize: true}，我们可以通过判断这个修饰符对应的属性值，对modelValue进行一些操作。})
全网最详细的v-model讲解
热门推荐
zayyo的博客
11-29 15万+
v-model的基本使用 表单提交是开发中非常常见的功能，也是和用户交互的重要手段： 比如用户在登录、注册时需要提交账号密码； 比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； 它会根据控件类型自动选取正确的方法来更新元素； 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据
2.v-model 用在组件中
扛麻袋的少年的博客
03-31 2513
在Vue.js中，经常会使用v-model实现表单的双向数据绑定功能。 在双向数据绑定功能方面，v-model看着还是比较简单。但是v-model用到组件中之后，会发现瞬间就有点懵圈了。不知道 v-model用到组件里面，到底是怎么的一个处理方式。接下来，将会具体分析v-model是如何在组件中使用的： v-model用于组件中的官方文档: 　 使用自定义事件的表单输入组...
Vue v-model 详解
俊刚的博客
01-16 1937
在Vue.js中，v-model是一个非常重要的指令，它可以实现双向数据绑定，使得数据的改变可以自动反映到视图上，同时用户在视图上的操作也可以自动更新到数据中。它可以用于在表单元素上创建双向数据绑定。通过使用v-model指令，我们可以将表单元素的值与Vue实例中的数据进行关联，从而实现数据的双向同步。本文将详细介绍v-model的使用方法和实现原理，并通过详细的使用示例来帮助读者更好地理解和应用v-model。
在组件中实现v-model
longtengg1的博客
06-26 937
在一个组件myInput中 <template> <div> <input type="text" :value="text" @input="$emit('change', $event.target.value)" /> </div> </template> <script> export default { model: { prop: "text",
vue-在组件中使用v-model
小陈的博客
08-23 1万+
当我们使用。
13 VUE学习：组件v-model
百锦再的博客
05-21 9万+
这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。参数]小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。
vue组件的v-model
weixin_47450807的博客
02-10 1万+
一、正常使用的v-model 使用对input标签使用v-model，如上图所所示，可以将其拆分成两部分，一个是数据绑定，另一个是监听事件。 二、对组件使用v-model 如图所示，在给组件使用v-model的时候，其实相当于将绑定的值update:model-value通过props传递给组件。并且在该组件上监听一个名为update:model-value，在组件中通过this.$emit触发事件，并且可以将要修改的值，传递过去。 也可以将其写成如下所示 如上图所示，当我们在home组件中使用v-
组件上使用v-model 咋用的
03-10
对于组件上使用 v-model 的问题，可以在组件内部使用 props 接收父组件传递的值，然后通过 $emit 方法触发自定义事件，将值传递给父组件。在父组件中，可以使用 v-model 指令将数据双向绑定到组件上。具体实现可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值