精华内容
下载资源
问答
  • 父子组件通信,都是单项的,很多时候需要双向通信。这篇文章主要介绍了vue 自定义组件 v-model双向绑定、 父子组件同步通信,需要的朋友可以参考下
  • 主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • 主要介绍了vue中的v-model原理,与组件自定义v-model详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue自定义组件 v-model

    千次阅读 2019-04-16 11:16:58
    官方解释: v-model指令其实是下面的语法糖包装而成: <input ...因此,对于一个带有v-model组件,它应该如下: 接收一个valueprop 触发input事件,并传入新值 利用 $emit 触发 input ...

    官方解释:

    v-model指令其实是下面的语法糖包装而成:

    <input
      :value="something"
      @:input="something = $event.target.value">
    
    

    因此,对于一个带有 v-model 的组件,它应该如下:

    • 接收一个 value prop
    • 触发 input 事件,并传入新值

    利用 $emit 触发 input 事件:

    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 //接收一个 value 类型是Number
      }
      methods: {
        plus() {
          let val = this.value
          val++
          this.$emit('input', val) //触发 input 事件,并传入新值
        },
        minu() {
          let val = this.value
          if(val>0){
            val--
            this.$emit('input', val) //触发 input 事件,并传入新值
          }
        }
      }
    });
    
    
    // 组件使用
    <my-counter v-model="value"></my-counter>

    实例2:

    <template>
      <div>
        <input type="text" :value="value" @input="inputHandle">
      </div>
    </template>
    
    <script>
    
    export default {
      props: ['value'],
      methods: {
        inputHandle(e) {
          this.$emit('input', e.target.value)
        }
      }
    }
    
    </script>
    
    // 组件使用
    <i-Input v-model="value"></i-Input>
    
    

    根据官方解释,你可以在定义组件的时候,改写 传入的prop属性 和 $emit 事件

    
    ...
    model: {
      prop: 'checked',
      event: 'change'
    },
    ...

     

    展开全文
  • Vue 自定义组件v-model父子组件传值双向绑定 之前自己写过一个自定义组件,父组件使用 v-model 进行双向数据绑定的,写了好几次,当时明白,但是过了几天又忘了,写一下吧。 日常我们使用v-model <div id="app...

    Vue 自定义组件v-model父子组件传值双向绑定

    之前自己写过一个自定义组件,父组件使用 v-model 进行双向数据绑定的,写了好几次,当时明白,但是过了几天又忘了,写一下吧。

    日常我们使用v-model

    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model='message'>
    </div>
    <script>
        var vueApp = new Vue({
            el:'#app',
            data:{
                message:"我其实是一个语法糖"
            }
        })
    </script>
    

    去除它的语法糖

    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-bind:value='message' @input='message = $event.target.value'>
    </div>
    <script>
        var vueApp = new Vue({
            el: '#app',
            data: {
                message: "我其实是一个语法糖"
            }
        })
    </script>
    

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

    vue里面自定义组件v-model的语法糖:

    <custom v-model='something'></custom>
    

    约等于

    <custom :value="something" @input="value => { something = value }"></custom>
    

    用 v-model 语法糖来向父组件传递值。

    父组件使用v-model与子组件表单实现—双向绑定。

    在子组件里面,首先在props里面接收一下value值,然后初始化到newValue里面,然后监听newValue值变化,变化后发射事件到父组件

    watch:{
      newValue(){
        this.$emit('input', this.newValue)
      }
    }
    

    还有一篇:https://blog.csdn.net/weixin_42776111/article/details/108979101

    展开全文
  • 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到...

    一、model官方文档

    1. 类型:{ prop?: string, event?: string }
    2. 详细:
      允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
    3. Example:
     Vue.component('my-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        // this allows using the `value` prop for a different purpose
        value: String,
        // use `checked` as the prop which take the place of `value`
        checked: {
          type: Number,
          default: 0
        }
      },
      // ...
    })
    
    <my-checkbox v-model="foo" value="some value"></my-checkbox>
    
    1. 以上代码块相当于
     <my-checkbox
      :checked="foo"
      @change="val => { foo = val }"
      value="some value">
    </my-checkbox>
    

    二、代码示列

    1. 父组件
    <template>
      <section>
        <el-button @click="handleClick">父组件说</el-button>
        <span>{{notice}}</span>
        <child v-model="notice"></child>
      </section>
    </template>
    
    <script>
    import child from "./child";
    export default {
      name: "Parent",
      
      components: {
        child
      },
      
      data() {
        return {
          notice: ""
        };
      },
      
      methods: {
        handleClick() {
          this.notice = "我是父组件";
        }
      }
    };
    </script>
    
    1. 子组件
    <template>
      <section>
        <el-button type="primary" @click="handleClick">子组件回应</el-button>
      </section>
    </template>
    
    <script>
    export default {
      name: "Child",
    
      model: {
        prop: "message",
        event: "childToParent", // event的事件名需与$emit派发的相同
      },
    
      props: {
        message: {
          type: String,
          required: true
        }
      },
    
      methods: {
        handleClick() {
          this.$emit("childToParent", "子组件回应:我是子组件");  // $emit的事件名需与model中event相同
        }
      }
    };
    </script>
    
    1. 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,子组件代码可改为
     <template>
      <section>
        <el-button type="primary" @click="handleClick">子组件回应</el-button>
      </section>
    </template>
    
    <script>
    export default {
      name: "Child",
    
      props: {
        value: {
          type: String,
          required: true
        }
      },
    
      methods: {
        handleClick() {
          this.$emit("input", "子组件回应:我是子组件");
        }
      }
    };
    </script>
    

    三、子组件读取并修改父组件传的prop,且同步到父组件

    <template>
      <section>
        子组件回应:<el-input v-model="value" placeholder="输入子组件对父组件说的话"></el-input>
      </section>
    </template>
    
    <script>
    export default {
      name: "Child",
    
      props: {
        value: {
          type: String,
          required: true
        }
      }
    };
    </script>
    

    直接v-model绑定报错,如图,子组件中不能直接修改父组件传的prop
    在这里插入图片描述
    使用computed计算属性重新赋值:

    <template>
      <section>
        子组件回应:
        <el-input v-model="_value" placeholder="输入子组件对父组件说的话"></el-input>
      </section>
    </template>
    
    <script>
    export default {
      name: "Child",
    
      props: {
        value: {
          type: String,
          required: true
        }
      },
    
      computed: {
        _value: {
          get() {
            return this.value;
          },
          set(val) {
            this.$emit("input", val);
          }
        }
      }
    };
    </script>
    

    地址:vue官方文档

    展开全文
  • v-model是数据双向绑定,下面用input说明: &amp;lt;input type=&quot;text&quot; v-model=&quot;price&quot;&amp;gt; &amp;lt;input type=&quot;text&quot; :value=&...

    v-model是数据双向绑定,下面用input说明:

    <input type="text" v-model="price">
    <input type="text" :value="price" @input="price=$event.target.value">
    

    以上两行代码效果相同,:value 是把data里的数据绑定到input上的,但是在input里输入内容不会改变price的值,就需要用input事件监听输入的内容,改变price的值,这样就实现了数据双向绑定。

    v-model的原理明白后,我们来看如何在自定义的input组件上使用v-model。
    创建my-input组件,代码如下:

    <template>
      <div>
        <input type="text" :value="price" @input="inputListener">
      </div>
    </template>
    <script>
    export default {
    /**
    model具体是什么意思现在不太清楚,经过测试发现,如果没有这个对象,price在本组件中是不会被同步值的。
    也就是说:如果在当前组件中获取price的值是获取不到的,加上就可以了。以后明白这的原理再来完善说明。
    */
      model: {
        prop: "price",
        event: "input"
      },
      props: {
        price: String //这个是必须要写的,在父组件使用本组件的时候,使用v-model会自动识别value和input的事件
      },
      data() {
        return {
        };
      },
    
      components: {},
    
      computed: {},
    
      beforeMount() {},
    
      mounted() {},
    
      methods: {
        inputListener: function($event) {
        //发送事件到父组件,让父组件的v-model绑定的值与本组件输入的值同步
          this.$emit('input', $event.target.value)
        }
      },
    
      watch: {}
    };
    </script>
    

    在父组件中使用

    <my-input v-model="logObje.userName"></my-input>
    
    展开全文
  • 但是 Vue 是单项数据流,v-model 只是语法糖而已。v-bind只是个单向绑定 v-model这个指令只能用在&lt;input&gt;, &lt;select&gt;,&lt;textarea&gt;这些表单元素上,所谓双向绑定,指的...
  • 本篇文章主要介绍了vue如何在自定义组件中使用v-model,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue.js自定义组件实现v-model双向数据绑定的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue自定义组件v-model使用方法 先来看一下vue官方文档 自定义组件的v-model 实际DEMO演示 先写一个最简单的elementUI select封装组件 <template> <el-select :value="selectValue" // value中的值、...
  • vue自定义实现v-model

    2021-10-25 00:52:05
    Vue的双向数据绑定就是父组件可以修改子组件同一数据,子组件数据可以修改父组件同一数据。 父组件: 子组件: 上面实现了子组件自定义v-model
  • vue自定义组件v-model

    2021-06-24 13:40:35
    自定义组件上实现v-model双向绑定 vue2.x 子组件 <input type="text" :value="value" @input="valueChange"> </template> <script> export default { name:'inputDome', props:{ value:{ ...
  • 1.父组件啥也不用干只需要绑定v-model值 2.子组件接收的props属性必须为value 3.子组件data中必须定义一个属性接收value的值 4.子组件watch监听value值同步给定义的属性 5.子组件watch监听定义属性的值通过$emit(...
  • 最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟…官方教程写得不是很详细,所以我决定总结一下。 v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <...
  • 本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
  • 1. ElementUI form表单基本使用 , 表单校验流程. 2. v-model 自定义组件 , 并结合element from进行校验.
  • vue 自定义组件使用v-model 父组件 使用 v-model 子组件 默认 需要props->value的属性, 需要一个方法 进行如下操作, input是<input/> this.$emit('input', input.value); 就是 界面触发子组件某个...
  • 项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件。 类似如下: 父组件 <common-checkbox :checked="goodsSelected" ...
  • vue 自定义事件 v-model

    2021-10-21 17:54:54
    v-model实现了表单输入的双向绑定。一般我们是这么写的: // html <div> <input v-model="name" /> </div> // .vue文件 export default { data(){ return { name: '', } } }..
  • vue3 封装自定义组件v-model

    千次阅读 2021-01-14 15:45:34
    首先要注意 vue3中 v-model 默认绑定的变量名变了,从原理的 value 改成了 modelValue, 如果要改变变量的值,要执行一个事件 this.$emit("update:modelValue", value); <template> <div class="inline...
  • 文章目录vue3自定义组件v-model实例vue3自定义v-model的优点(较vue2) vue3自定义组件v-model实例 注意:我这里是typescript的语法,只是有个别地方和js相比要确定一下类型,比如函数传参时,和使用input元素的...
  • 一、简介 通常在开发的时候,随处使用到 v-model 进行数据双向绑定 <input v-model="name"> 等价于 <input :value="name" @input="value = arguments[0]">...二、JS 实现自定义组件 v-model
  • vue中父子组件通信,都是单项的,直接在子组件中修改prop传的值vue也会给出一个警告,接下来就用一个小列子一步一步实现了vue自定义组件实现v-model双向绑定,父组件值变了子组件也会跟着变,子组件中传过来的值变...
  • .sync修饰组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-03</title> <!-- 引入Vue --> <link href=...
  • 通俗一点来说,就是当数据发生变化的时候,视图同时发生变化,这可以说是Vue的精髓之处了(不过关于双向绑定,后续可以出一篇更为详尽的博文来深入模拟一下Vue的实现,这里重点还是探讨实现自定义组件v-model指令...
  • vue自定义组件v-model完美使用方式

    千次阅读 2020-01-10 20:07:26
    vue自定义组件v-model完美使用方式前言实现效果父组件子组件 前言 当我们自定义form组件的时候,v-mode是几乎必须的,但v-mode的正确写法应该是怎样呢? 其实只要了解vue自定义组件保留的关键变量 value 和方法 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,024
精华内容 9,609
关键字:

vue自定义组件v-model

vue 订阅
友情链接: 1.zip