精华内容
下载资源
问答
  • 子父组件双向绑定 ...//使用v-model:自定义值="源值" 来进行传参 <gl-input v-model:value="inputValue"></gl-input> 子组件代码 <template> <div> <ElInput :model-va

    子父组件双向绑定
    一般是写法:
    由父组件定义[源值] 传给子组件 子组件使用props来接受来自父组件的值
    每次子组件修改相应的值时,需要传给父组件再进行接受修改父组件[源值]

    新写法:

    //使用子组件
    //使用v-model:自定义值="源值" 来进行传参
    <gl-input v-model:value="inputValue"></gl-input>
    

    子组件代码

    <template>
      <div>
        <ElInput :model-value="value" @input="change"><slot /></ElInput>
      </div>
    </template>
    
    <script>
    import { ElInput } from "element-plus"
    export default {
      name: "GlInput",
      components: { ElInput },
      props: {
        value: {
          type: String,
          default: "nihao"
        }
      },
      emits: ["update:value"],
      data() {
        return {}
      },
      methods: {
        change(e) {
          console.log(e)
          this.$emit("update:value", e)
        }
      }
    }
    </script>
    
    <style></style>
    
    

    每次子组件修改值直接返回给父组件 使用这种方式父组件不需要再重新接收子组件emit函数再次修改源值 可直接修改父组件源值

    展开全文
  • Vue自定义组件实现v-modelvue2和vue3)vue2实现:vue3实现: vue2实现: 1.首先要先自定义两个组件,父子关系(略) 2.在父组件中,对子组件引用:(switcher是我的一个组件) <switcher v-model="变量名">&...

    Vue自定义组件实现v-model(vue2和vue3)

    vue2实现:

    1.首先要先自定义两个组件,父子关系(略)
    2.在父组件中,对子组件引用:(switcher是我的一个组件)

    <switcher v-model="变量名"></switcher>
    

    3.我想实现的是父子组件实时响应input框中的内容。
    其他的都不重要,就看我框中的部分,:check单向绑定,@change改变时触发事件,这两者结合实现对父组件的实时响应
    在这里插入图片描述
    4.还没结束,看js代码
    在这里插入图片描述
    modelprop表示父组件给子组件传值的名字event表示子组件给父组件返回值的方法名

    这样就实现了,那么举一反三
    我这里是checked值+change事件,那么如果我的input不是check类型,是text类型。
    则可以这样:
    子组件html中:

    <input type="text" :value="val"  @input="$emit('input', $event.target.value)" />
    

    js中:

    moedel:{
      prop: 'val', //val表示v-moedel传给子组件值的名字
      event: 'input'  //表示子组件传值的方法名
    },
    props: ['val'] //上面只是规定,这里你得接收啊传的值啊,对吧
    

    结束了…试一试吧
    事实上,也可以不写model规定,等先把这个弄会了再去试那种写法吧

    附上官方文档:vue2自定义组件实现v-model

    vue3实现:

    1.父组件html中:

      <switcher v-model="变量名"></switcher>
    

    2.子组件html中:

    <input type="text" :value="input" @input="$emit('update:modelValue', $event.target.value)" />
    

    子组件js中:

    	props: {
    		modelValue: String,  //这是关键,与vue2的区别就是不用自己定义model了。即默认是modelValue
    	},
    	
    

    这种情况是单个v-model,当然你也可以自定义名字,不用modelValue。详细见vue3官网吧,
    链接地址:vue3自定义组件实现v-model

    展开全文
  • vue2 Vue3 v-model 原理

    千次阅读 2021-11-19 08:53:51
    v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况(vue2, vue3),它都是一个语法糖,最终会生成一个属性和一个事件。 当其作用于表单元素时,vue会根据作用的表单元素类型而生成合适的属性...

    面试题:请阐述一下 v-model 的原理

    v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况(vue2, vue3),它都是一个语法糖,最终会生成一个属性和一个事件

    image.png

    image.png

    当其作用于表单元素时vue会根据作用的表单元素类型而生成合适的属性和事件。例如:

    • text 和 textarea 元素使用 value property 和 input 事件;
    • checkbox 和 radio 使用 checked property 和 change 事件;
    • select 字段将 value 作为 prop 并将 change 作为事件。

    用于自定义组件

    vue2

    v-model也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个value属性和input事件。

    子组件 HelloWorld

    这个子组件只是实现一个简单计数器的功能,然后我向上分发的事件名称是update:value。但是vue2如果使用v-model会自动的把这个事件名称给改成input

    <template>
      <div class="hello">
        <button @click="change(value - 1)">-</button>
        <span>{{value}}</span>
        <button @click="change(value + 1)">+</button>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      props: {
        value: Number,
      },
      methods: {
        change(val) {
          this.$emit("update:value", val);
        },
      },
    };
    </script>
    复制代码
    

    APP 来使用

    <HelloWorld :value="inputVal" @update:value="inputVal = $event" />
    等效于
    <HelloWorld v-model="inputVal" />
    复制代码
    

    结果:

    在这里插入图片描述

    分析虚拟dom结果

    vue2的虚拟dom查看方式是 在mounted中使用this._vnode来进行查看,然后查看componentOptions来查看组件传递的属性。

    image.png image.png

    开发者可以通过组件的model配置来改变生成的属性和事件 修改子组件 HelloWorld

    <template>
      <div class="hello">
        <button @click="change(number - 1)">-</button>
        <span>{{ number }}</span>
        <button @click="change(number + 1)">+</button>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      props: {
        number: Number,
      },
      model: {
        prop: "number", // 默认为 value
        event: "change", // 默认为 input
      },
      methods: {
        change(val) {
          this.$emit("change", val);
        },
      },
    };
    </script>
    复制代码
    

    父组件修改

    <HelloWorld v-model="inputVal" />
    <!-- 等效于 -->
    <HelloWorld :number="inputVal" @change="data=$event" />
    复制代码
    

    效果

    image.png

    vue3

    v-model也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个modelValue属性和onUpdate:modelValue事件。

    子组件 Comp

    <script setup>
    import { ref, } from 'vue'
     const props =  defineProps({
        modelValue: Number
      })
     
     const emits = defineEmits(['update:modelValue']);
      
      const change = (val) => {
        emits('update:modelValue', val)
      }
    </script>
    <template>                             
      <button @click="change(props.modelValue -  1)">
        -
      </button>
      <span>{{props.modelValue}}</span>
      <button @click="change(props.modelValue +  1)">
        +
      </button>
    </template>
    复制代码
    

    父组件App

    <script setup>
    import { ref, getCurrentInstance } from 'vue'
     import Comp from './Comp.vue'
     
    const msg = ref(123);
     const internalInstance = getCurrentInstance();
      console.log(internalInstance)
     
    </script>
    
    <template>                             
      <Comp v-model="msg"></Comp>
      等效于
      <Comp :modelValue="msg" @update:modelValue="msg = $event"></Comp>
    </template>
    复制代码
    

    结果

    在这里插入图片描述

    虚拟dom分析

    vue3 的查看虚拟dom的使用方式,是使用``getCurrentInstance`来查看, 里面的children中的props中来查看属性传递

    image.png

    区别

    vue2和vue3都又v-model,原理都是生成一个属性和一个事件,但是也存在些区别。

    .sync修饰符

    vue3中的.sync修饰符是去掉了的,他的功能可以由v-model的参数替代

    例如:

    <!-- vue2 -->
    <Comp :title="inputVal" @update:title="inputVal = $event" />
    <!-- 简写为 -->
    <Comp :title.sync="inputVal" />
    
    <!-- vue3 -->
    <Comp :title="inputVal" @update:title="inputVal = $event" />
    <!-- 简写为 -->
    <Comp v-model:title="inputVal" />
    复制代码
    

    多个v-model

    vue3中允许你写多个v-model,这也是强烈的说明了,v-model就是一个语法糖,只是帮你减少了代码量,仅此而已。vue2不能写多个v-model

    <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
    
    <!-- 是以下的简写: -->
    
    <ChildComponent
      :title="pageTitle"
      @update:title="pageTitle = $event"
      :content="pageContent"
      @update:content="pageContent = $event"
    />
    复制代码
    

    ##v-model 修饰符

    vue2.x是自带的修饰符,但是在3.x的版本中,可以自定义修饰符哦 .在3.x中的修饰符会在当作属性传递给子组件,并且在属性中生成一个modelModifiers的属性。存在这个修饰符就会有对应的修饰符,并且是true,如果没有传递,那就是undefined。

    修改Comp子组件

    <script setup>
    import { ref, } from 'vue'
     const props =  defineProps({
        modelValue: Number,
        modelModifiers: { 
          default: () => ({})
        }
      })
    
     const emits = defineEmits(['update:modelValue']);
      
      const change = (val) => {
        // 如果存在修饰符range2,那就多加1,减法就没有效果
        if(props.modelModifiers.range2){
          val ++;
        }
        emits('update:modelValue', val)
      }
    </script>
    <template>                             
      <button @click="change(props.modelValue -  1)">
        -
      </button>
      <span>{{props.modelValue}}</span>
      <button @click="change(props.modelValue +  1)">
        +
      </button>
    </template>
    复制代码
    

    父组件使用

    <Comp v-model.range2="msg"></Comp>
    复制代码
    

    效果

    在这里插入图片描述

    vue3测试代码地址: vue2测试代码地址,由于忘记登录,被删除了🤣🤣🤣

    展开全文
  • Vuev-model详解

    2021-01-23 21:14:04
    文章目录一,v-model是什么?二,作用三,原理四,类型1. v-model:radio2. v-model:checkbox单个复选框多个复选框3. v-model:select五,修饰符1. lazy2.number3.trim 一,v-model是什么? <body> <div ...

    一,v-model是什么?

    <body>
    <div id="app">
        <input type="text" v-model="msg">
        <h2>{{msg}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello',
            }
        })
    </script>
    </body>
    

    结果:在这里插入图片描述
    在这里插入图片描述

    二,作用

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

    1. 因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。
    2. 当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。

    三,原理

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

    1. 通过v-bind绑定一个value属性
    2. 通过v-on指令给当前元素绑定input事件
    <input type="text" :value="msg" v-on:input="msg=$event.target.value">
    

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

    四,类型

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

    1. v-model:radio

    <div id="app">
        <!--当v-model绑定的是同一个变量,可以不加name属性来实现radio的互斥-->
        <label for="right">
            <input type="radio" id="right" name="judge" value="对" v-model="judge">对
        </label>
        <label for="wrong">
            <input type="radio" id="wrong" name="judge" value="错" v-model="judge">错
        </label>
        <h2>你的判断是:{{judge}}</h2>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                judge:'对'  //目的:选择之后将值绑定到judge中
            }
        })
    </script>
    

    结果:
    在这里插入图片描述
    在这里插入图片描述

    2. v-model:checkbox

    单个复选框
    <div id="app">
        <label for="ok">
            <input type="checkbox" id="ok" v-model="isOk">可以
        </label>
        <h4>{{isOk}}</h4>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                isOk:false
            }
        })
    </script>
    

    结果:
    在这里插入图片描述
    在这里插入图片描述

    多个复选框
    <div id="app">
    	<input type="checkbox" value="香蕉" v-model="fruits">香蕉
        <input type="checkbox" value="苹果" v-model="fruits">苹果
        <input type="checkbox" value="梨子" v-model="fruits">梨子
        <h4>爱吃的水果是:{{fruits}}</h4>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                fruits:[]
            }
        })
    </script>
    

    结果:
    在这里插入图片描述

    3. v-model:select

    <div id="app">
    	<select name="" id="" v-model="type">
            <option value="电影">电影</option>
            <option value="动漫">动漫</option>
            <option value="电视剧">电视剧</option>
        </select>
        <h4>喜欢的视频类型是:{{type}}</h4>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                type:'动漫'
            }
        })
    </script>
    

    结果:
    在这里插入图片描述
    在这里插入图片描述

    五,修饰符

    1. lazy

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

    <input type="text" v-model.lazy="msg">
    

    2.number

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

    <input type="text" v-model.number="msg">
    

    3.trim

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

    <input type="text" v-model.trim="msg">
    
    展开全文
  • v-model和.async本质上都是实现双向绑定的语法糖,vue3子组件中自定义实现v-model的方法改为和.sync一致,因此去除.sync,直接用v-model代替。 1.自定义v-modelvue2.x中的实现 //父组件 <template> <p...
  • my-input @blur="change" v-model="search"></my-input> </div> </template> <script> import myInput from "../components/myInput.vue"; import { ref } from "v...
  • 萌新在尝试使用render()函数编写基于vue3的自定义组建时遇到需要使用自定v-model, 查阅了很多资料都没有找到有如何在render()函数中自定义的相关文章。 在查阅官网和相关书籍以及凭感觉之后琢磨出正确姿势,来给...
  • v-model 你可以用 v-model 指令在表单<input>、<textarea> 及 <select>...vue2的v-model 原理还是传递一个value参数和绑定了一个input事件 <template> <div> <.
  • 前端开发使用框架的目的就是 “双向数据”绑定,不在需要jquery去手工驱动之前在《 vue2.x入坑总结—回顾对比angularJS/React》,之前总关于vue\angluar\react的数据绑定:react没有双向绑定,数据源状态提升至父...
  • vue2.0中,我们多使用v-bind去绑定传值,但是v-bind是单向绑定,只有父组件传递的内容发生变化,子组件才会更新。 <div id="counter"> <button @click="adds()">加1</button> <br /> ...
  • vue3.x篇三:v-model用法

    千次阅读 2020-12-21 15:01:11
    vue2.x:允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 modelvue3.x:双向数据绑定的 API 已经标准化。(一个组件上允许使用多个model) 具体的vue升级变动,请阅读官方vue3...
  • vue.js v-model的运算

    2021-02-15 21:24:31
    <title></title> </head> <body> <input type="" name="" v-model='left'>- <input type="" name="" v-model='right'> {{left-right}} <script type="text/javascript"> new Vue( { el:'body', ...
  • a-input v-model绑定后,界面输入了,后台数据却没有变化。 <a-input v-model="ruleForm.moNo" @change="ShowMo">...是因为antD-vue2.x版,form 和 formmodel合并成form了,保留了formmodel的功能。
  • vue3中v-model语法糖

    2021-09-11 21:05:25
    目标:现在vue3的使用越来越普遍了,vue3这方面的学习我们要赶上,今天说一下vue3中v-model语法糖的使用,想了解vue2中的v-model可以去看我之前的文章。 Vue2中v-model的应用场景 <template> <div> ...
  • <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...script src="https://unpkg.com/vue@next.
  • Vue3笔记_组件的v-model

    2021-10-12 15:59:29
    ​ 我们都知道,在vue中我们可以通过v-model双向绑定到input表单,作用是能够实现数据的双向绑定,即input的value值和绑定的数据实现互相同步。在vue3中,v-model得到了更进一步的增强,它可以应用在组件中了。那么...
  • 工作中经常会涉及到父子组件数据更新和页面相应...处理方式:考虑使用 自定义组件的v-modelvue2 中方式) 父组件 <search-tab :list="list" v-model="active" /> ... export default { data(){ return {
  • Vue3.0新特性 —组件v-model 组件v-model支持参数 在Vue2.x时,我们要想给子组件传值,还得单独传入。Vue3.x直接以v-model:xxx形式传入参数,并且配合修饰符.sync进行数据同步更新。 App.vue <template> {{...
  • vue 自定义事件 v-model

    2021-10-21 17:54:54
    v-model实现了表单输入的双向绑定。一般我们是这么写的: // html <div> <input v-model="name" /> </div> // .vue文件 export default { data(){ return { name: '', } } }..
  • Vue基础-Day02 回顾 主线:把数据填充到模板中 需要重点掌握的规则:模板中如何填充数据(模板语法) 熟悉Vue基本特性 熟悉Vue的基本使用 el 属性用于指定模板填充的容器(位置) data 属性用于提供向模板填充的...
  • Vue v-model收集表单数据 文章目录Vue v-model收集表单数据text和passwordradiocheckboxselect 下拉列表总结 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>...
  • 核心:v-model实现是通过默认自定义属性value,自定义方法input(Vue2)实现,自定义属性modelValue,自定义方法input(Vue3)实现 Vue2.0 关系: <v-child v-model="numm"></v-child> <!-- 等同于 -->...
  • v-model 和 : model之间的区别 v-model通常用于input的双向数据绑定 ,也可以实现子组件到父组件数据的双向数据绑定 :modelv-bind:model的缩写 这种只是将父组件的数据传递到了子组件,并没有实现子组件和父组件...
  • 一、Vuev-modelv-bind:value的区别 1.v-model //HTML <div> <input type="text" placeholder="请输入值model" name="" id="" v-model="msg"> <div>{{msg}}v-model绑定</div> &...
  • v-modelvue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码: <template>...
  • Vue动态设置v-model

    2021-10-22 15:56:55
    需求:从后端获取到列表数据如下,想动态渲染el-input输入框,以propertyNameZh的值为标签名,propertyNameEn的值为v-model绑定对象。 goodsProperty:[ { 'propertyNameZh':'商品售价', 'propertyType':'text'...
  • vuev-model基本使用

    2021-02-14 10:28:16
    v-model:获取和设置表单元素的值(双向绑定) <body> <div id="app"> <input type="text" v-model="message" @keyup> <h2>{{ message }}</h2> </div> <script src=...
  • vue3还是有些不同的噢 <template> <div> <p>state: a: {{ state.a }}</p> <p>state.a(toRef): a: {{ xxx }}</p> <p>state.a(ref): a: {{ xxxx }}</p> <...
  • vuev-modelv-decorator的用法区别

    千次阅读 2021-04-22 14:51:18
    v-model:是双向数据绑定,啥为双向绑定,即为绑定的是个变量,当变量的值改变,双方都会跟着改变。也可用于form表单。 v-decorator:一般用于form表单下的a-form-item 下的控件上,其用法如下: 相当于html的name...
  • 效果图展示 此组件有需要的同学可以直接复制使用 子组件 timerPickLimit.vue <!-- @name: 24 * 7时间选择器 @description: 主要作用于设备禁止登录时间选择 @Method: 使用v-model改进 ...timer-pick-limit v-model=

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 113,794
精华内容 45,517
关键字:

v-modelvue

vue 订阅