vue在组件中使用v-model

最新推荐文章于 2024-04-02 11:47:32 发布
最新推荐文章于 2024-04-02 11:47:32 发布
阅读量56 收藏
点赞数
原文链接：http://www.cnblogs.com/zph666/p/7524833.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <my-component v-model="msg"></my-component>
  {{msg}}
  <my-counter v-model="num"></my-counter>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
  Vue.component('my-component', {
    template: '<div><input type="text" :value="currentValue" @input="handleInput"/></div>',
    data: function () {
      return {
        // 双向绑定值
        currentValue: this.value
      }
    },
    props: ['value'],// 设置value为props属性
    methods: {
      handleInput(event) {
        var value = event.target.value;
        this.$emit('input', value);
      }
    }
  })
  Vue.component("my-counter", {
    template: `<div>
                <h1>{{value}}</h1>
                <button @click="plus">+</button>
                <button @click="minu">-</button>
            </div>`,
    props: {
      value: Number
    },
    data: function() {
      return {
        val: this.value
      }
    },
    methods: {
      plus() {
        this.val = this.val + 1
        this.$emit('input', this.val)
      },
      minu() {
        if(this.val>0){
          this.val = this.val-1
          this.$emit('input', this.val)
        }
      }
    }
  });
  new Vue ({
    el: '#app',
    data: {
      msg: 'hello',
      num: 1
    }
  })
</script>
</body>
</html>

 

参考官方文档：http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

参考：http://www.cnblogs.com/bldf/p/6645225.html

转载于:https://www.cnblogs.com/zph666/p/7524833.html

weixin_30270889
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue如何在自定义组件中使用v-model
01-19
先来一个组件，不用vue-model，正常父子通信 <!-- parent --> 我是父亲, 对儿子说： {{sthGiveChild}} <Child returnBack=turnBack give=sthGiveChild></Child> [removed] import Child from './Child....
vue-在组件中使用v-model
小陈的博客
08-23 1万+
当我们使用。
Vue----组件上的 v-model
emmmm.....
04-25 6653
文章目录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中自定义组件上使用v-model
weixin_62189802的博客
05-28 1万+
自定义组件上使用v-model
Vue组件中的v-model（深入解析）
最新发布
nibabaoo的博客
04-02 2438
这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。
Vue 自定义组件中 v-model 的使用
热门推荐
qq_40179479的博客
08-28 1万+
Vue自定义组件如何使用v-model，整理了Vue2和Vue3中的用法
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-17
主要介绍了vue在自定义组件中使用v-model进行数据绑定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中的v-model原理,与组件自定义v-model详解
10-14
这里，组件通过`props`接收父组件传递的`value`，并在点击事件中使用`$emit('input', 新值)`来通知父组件更新`v-model`绑定的值，从而实现了自定义的双向绑定。 此外，Vue还支持自定义样式下的多选与单选。在处理...
2.v-model 用在组件中
扛麻袋的少年的博客
03-31 2513
在Vue.js中，经常会使用v-model实现表单的双向数据绑定功能。 在双向数据绑定功能方面，v-model看着还是比较简单。但是v-model用到组件中之后，会发现瞬间就有点懵圈了。不知道 v-model用到组件里面，到底是怎么的一个处理方式。接下来，将会具体分析v-model是如何在组件中使用的： v-model用于组件中的官方文档: 　 使用自定义事件的表单输入组...
vue自定义组件中使用v-model
u010671652的专栏
05-26 1862
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
在组件上使用 v-model
前端精髓
04-17 6526
自定义事件也可以用于创建支持` v-model` 的自定义输入组件。
Vue在组件上使用v-model
码小余の博客
11-01 7347
Vue在组件上使用v-model 自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住： <input v-model="searchText"> 等价于： <input :value="searchText" @input="searchText = $event.target.value" > 当用在组件上时，v-model 则会这样： <custom-input :value="searchText" @input="searchTex
跟着官网学 Vue - 组件 v-model
学无止境
12-14 388
【代码】跟着官网学 Vue - 组件 v-model。
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-
vue2.0 v-model 在自定义组件上的使用教程
郝峰vip的博客
12-09 4520
Vue 2.0 自定义组件上使用v-model
Vue 在组件上使用 v-model
bao
03-11 3131
Vue 在组件上使用 v-model v-model 双向数据绑定 简单理解: 相当于在input上动态绑定了value, 又在input绑定了input事件 在组件上使用 在组件上使用 v-model 会默认在组件上添加 默认自定义属性( value ) 默认自定义事件( input ) 小栗子: <template> <div> 这里是父组件<b...
vue2 自定义组件使用v-model
09-03
在Vue2中，我们可以通过自定义组件来实现v-model的双向数据绑定。具体实现步骤如下： 1. 在父组件中注册子组件，并在子组件上使用v-model指令。例如，我们可以在父组件中使用<MyInput v-model="name"/>，其中name是在父组件的data中定义的变量。 2. 在子组件中，需要通过props接收父组件传递过来的value值，并通过$emit方法触发change事件来更新父组件的value值。例如，在子组件中的template模板中，可以使用<input v-bind:value="value" v-on:change="$emit('change', $event.target.value)">来实现。 3. 在父组件中，需要提供一个data属性（例如inputValue），并在子组件上绑定v-model，即<custom-input v-model="inputValue"></custom-input>。 这样，当子组件中的input值发生变化时，会触发change事件，并通过$emit方法将变化的值传递给父组件，从而实现了双向数据绑定。 需要注意的是，在Vue2.2.0及以上的版本中，可以通过配置model选项来自定义v-model的prop和event。例如，在子组件中可以使用Vue.component来定义自定义组件，然后通过model选项来配置prop和event，如下所示： ``` Vue.component('custom-input', { model: { prop: 'value', event: 'change' }, props: { value: String }, template: ` <input v-bind:value="value" v-on:change="$emit('change', $event.target.value)"> ` }) ``` 然后在父组件中使用<custom-input v-model="inputValue"></custom-input>来实现双向数据绑定。在这个例子中，输入框的值会与父组件中的inputValue变量进行双向绑定。 需要注意的是，在Vue3中，v-model配置已被移除，而是通过v-bind和v-on手动实现双向数据绑定。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue2自定义组件中使用v-model](https://blog.csdn.net/weixin_38039976/article/details/116432137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [详解vue 自定义组件使用v-model 及探究其中原理](https://download.csdn.net/download/weixin_38680671/14828861)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值