vue3自定义组件之v-model实现父子组件双向绑定

vue3 v-model父子组件双向绑定

vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法:

// vue2的v-model双向绑定方法
model: {
     prop: 'value', //3.x默认值改为了modelValue
     event: 'input' //3.x默认值改为了update:modelValue
   },
//使用 this.$emit('input', index);

vue3.x采用以下方式(v-model默认对应的prop值是modelValue)

父组件:

<inpageMenus
    v-model="menu"
    />

子组件:

<script>
export default {
  name: 'MenusComponent',
  props: {
    modelValue: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    clickMenu(index) {
      this.$emit('update:modelValue', index);
    },
  },
};
</script>

vue3.x可以绑定多个v-model

父组件:

<inpageMenus
    v-model="menu"
    v-model:text="text"
    />

子组件:

<script>
export default {
  name: 'MenusComponent',
  props: {
    modelValue: {
      type: Number,
      default: 0,
    },
    text: {
      type: String,
      default: '0',
    },
  },
  methods: {
    clickMenu(index) {
      this.$emit('update:modelValue', index);
    },
    textChange(str) {
      this.$emit('update:text', str);
    },
  },
};
</script>

vue3.x去掉了v-model的.sync修饰符

其他的比如.trim依然可以使用,新增自定义修饰符

父组件

    <test
      v-model.toLowerCase="color"
      v-model:text.toUpperCase="textValue"/>

子组件

<template>
  <div class='test'>
    <input type="text" @input="inputf">
    <input type="text" @input="input2f">
  </div>
</template>
<script>
export default {
  name: 'test',
  props: {
    modelValue: {
      type: String,
      default: 'eee',
    },
    modelModifiers: { // 获取modelValue修饰符
      type: Object,
      default: () => ({}),
    },
    text: {
      type: String,
      default: 'eee',
    },
    textModifiers: { // 获取text修饰符
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    inputf(e) {
      let { value } = e.target;
      if (this.modelModifiers.toLowerCase) {
        value = value.toLowerCase();
      }
      this.$emit('update:modelValue', value);
    },
    input2f(e) {
      let { value } = e.target;
      if (this.textModifiers.toUpperCase) {
        value = value.toUpperCase();
      }
      this.$emit('update:text', value);
    },
  },
};
</script>

vue3 v-model使用(多个 v-model 绑定)

//父组件
setup(props) {
	const msg = ref("msg");
	const foo = ref('123')
	return{
	foo,msg
	}
}
<!--父组件--!>
{{modelValue}}  {{msg}}
 <HelloWorld v-model:foo="modelValue" v-model:message="msg"></HelloWorld>

<!--子组件--!>
  <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />
 <input type="text" :value="message" @input="$emit('update:message', $event.target.value)" />/>

自定义修饰符的用法,

根据官方

//父组件
<HelloWorld v-model.capitalize="myText"></HelloWorld>
{{myText}}
setup(){
	return {  myText : ref(22); } //不加ref无法做到响应
}
//子组件
//自定义修饰符 capitalize  通过modelModifiers prop 提供给组件 忽视any
 <input type="text" :value="modelValue" @input="emitValue" />
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({ capitalize: false })
    }
  },
  created() {
    console.log(this.modelModifiers); // { capitalize: true }
  },
  methods: {
    emitValue(e: any) {
      let value: any = e.target.value;
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1);
      }
      this.$emit("update:modelValue", value);
    }
  }
//对于带参数的 v-model 绑定
 <vModel v-model:foo.capitalize="bar"></vModel>
   props: {
    foo: {
      type: String
    },
    fooModifiers: {
      type: String
    }
  }
  created() {
    console.log(this.fooModifiers); // { capitalize: true }
  }
  <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue.js使用v-model实现父子组件间的双向通信示例

    本文实例讲述了vue.js使用v-model实现父子组件间的双向通信.分享给大家供大家参考,具体如下: <template> <div> 这是主页面 <h1> {{num}}</h1> <button @click="handleMins">-1</button> <hr> <!-- 作者:786905664@qq.com 时间:2017-09-24 描述:局部组件 --> <com

  • Vue v-model实现案例介绍

    目录 1. 概述 2. 使用方法 3. 案例 3.1 用户登录 3.2 todolist 3.3 实现单个复选框 3.4 实现多个复选框 3.5 实现复选框全选 3.6 单选和下拉 4. v-model修饰符 4.1 lazy 4.2 trim 4.3 number 5. 案例 5.1 购物车 5.2 购物车持久化 1. 概述 v-model 是 Vue 提供的一个语法糖,它是 value 值和事件的结合体,它会根据不同的表单项,来选择执行不同的事件.它的作用是,通过和表单元素绑定,实现双向数据

  • vue.js自定义组件实现v-model双向数据绑定的示例代码

    我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <

  • 浅谈vue实现双向事件绑定v-model的原理

    目录 解释: 总结 补充 与js或者jquery直接改变操作dom不同,vue使用v-model实现数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值 官方文档这么解释: v-model只不过是一个语法糖而已,真正的实现靠的还是 v-bind:绑定响应式数据 触发 input 事件 并传递数据 (核心和重点) 如下代码 <input

  • vue使用v-model进行跨组件绑定的基本实现方法

    大家好,今天我们来说一下使用v-model实现父子组件的绑定效果 1:简单版代码如下: 父组件: <template> <div> // 3:使用子组件,并使用v-model绑定 <About v-model="father"/> </div> </template> <script> // 1:引入子组件 import About from "./About"; export default

  • vue中v-model和响应式的实现原理解析

    目录 v-model 响应式实现 v-model 首先要了解v-model就是vue帮我们封装的语法糖,真正实现靠的还是: v-bind:绑定响应式数据 触发 input 事件 并传递数据 例如下面示例: <template> // 这两种写法等价 <input v-bind:name="name" v-on:input="name=$event.target.value"/> <input v-model="name&quo

  • vue3实现v-model原理详解

    vue3 源码正式放出来了,想必大家也都开始争先恐后的学习 vue3 的知识了.由于 vue3 已经不再支持 v-model 了,而使用 .sync 来代替,但是为了这篇文章可以帮助大家快速了解 vue 的双向绑定实现原理,部分使用了 vue2.x v-model 的实现原理 proxy 的基础知识,相信大家已经都很了解了,让我们一起来回顾一下吧 proxy 是对一个对象的代理,并返回一个已代理的对象,已代理的对象如果发生任何 set 跟 get 的方法都可以被捕获到,我们写一个简单的 :che

  • vue自定义组件实现v-model双向绑定数据的实例代码

    项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">

  • 详解vue中的父子传值双向绑定及数据更新问题

    在进行父子组件传值时,用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值,视图未发生变化的解决办法,当时完成项目时,一直未找到原因,修改了好久. 1.父子组件传值双向绑定 在传递给子组件中的变量上使用.sync修饰符,就能够实现父子传值的双向绑定 <!-- 父组件 --> <template> <div class="audioCate"> <child :show.sync="showModel" @

  • vue3中reactive数据被重新赋值后无法双向绑定的解决

    目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my

  • Vue非父子组件通信详解

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了实现.先看下简单的通信效果: 就是点击了一个组件,另一个组件的数字递加. html如下: <div id="app"> <component-a></component-a> <com

  • 浅谈Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆落.特别是在组件层级比较深的情况下.通过广播和事件分发的机制,就显得比较混乱了. 官方在废除的同时,也为我们提供了替换方案,包括实例化一个空的vue实例,使用$emit反应子组件上的状态变化 1.使用$emit触发事件 helloWorld.vue作为父组件,dialogConfigVi

  • Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据 2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 子组件向父组件中传递数据 主要谈谈2中情景的实现,有三种方式: 一. 通过props,父组件向子组件中传递数据和改变数据的函数,通过在子组件中调用父组件传过来的函数,达到更新父组件数据(向父组件传递数据)的作用(子组件中需要有相应的响应事件) 二. 通过在子组件中触发一个 自定义事件(vm.$emit),将数据作为v

  • vue中非父子组件的通信你了解吗

    目录 一.Provide和Inject 二.Provide和Inject的另一种写法 三.全局事件总线mitt库 总结 我们总结了父子组件通信方式有:props + emit.这里我们将总结一下,非父子组件通信方式,这里还不涉及到Vuex. 如果存在祖孙组件,我们可以通过Provide和Inject进行通信. 如果不是祖孙组件,也不是父子组件,我们可以采用Mitt全局事件总线第三方库来实现. 一.Provide和Inject Provide和Inject用于非父子组件之间共享数据,比如有一些深度

  • Vue中父子组件通信与事件触发的深入讲解

    目录 一.组件 子组件 父组件 二.父子组件通信 父组件给子组件通信 子组件向父组件通信 三.父子组件事件触发 父组件调用子组件中的事件方法 子组件调用父组件中的事件方法 四.总结 一.组件 子组件 <template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</

  • Vue非父子组件之间的通信方式详解

    目录 非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线 总结 非父子组件的通信 此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信. 这里我们主要讲两种方式: Provide/Inject: 全局事件总线: 1.Provide和Inject 1.1基本使用 Provide/Inject用于非父子组件之间共享数据: 比如有一些深度嵌套的组件

  • Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    目录 方式一:通过监听事件实现 方式二:通过 v-model 实现 方式一:通过监听事件实现 父组件将数据传递给子组件通过 props 实现:而子组件将数据传递给父组件通过事件来实现,在子组件中定义一个事件,在该事件中传递值,由父组件中监听这个事件.通过这种方式实现父子组件双向绑定的效果最常见. 子组件案例代码: <template> <el-select v-model="value" placeholder="请选择" @change=&quo

  • vue父子组件通信的高级用法示例

    前言 vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div class="parent"> 我是父组件 <!--父组件监听子组件触发的say方法,调用自己的parentSay方法--> <!--通过:msg将父组件的数据传递给子组件--> <children :msg="msg" @s

随机推荐