vue在组件中使用v-model的场景

目录
  • 一、使用场景
  • 二、V-Model的本质
  • 三、关键步骤
    • 1. props 的使用
    • 2. $emit 的使用
    • 3. 关键的 model
  • 四、不使用 model 选项的 v-model
    • 1. 父组件 home
    • 2. 子组件homeChild
    • 3. 效果
  • 五、用 model 选项的 组件使用 v-model
    • 1、父组件
    • 2. 子组件

一、使用场景

子组件想要使用父组件的值,又想去改父组件的值

二、V-Model的本质

  • 1.给子组件的 value 传个变量
  • 2.监听子组件的input事件,并且把传过来的值赋给父组件的变量

三、关键步骤

1. props 的使用

在自定义的 vue 文件中,声明父组件要向子组件传递的 prop 属性,例如

 props: {
    // 接收string和number类型的值,
    myValue: [String, Number],
  },

注意: myValue 这个属性名称是可以自定义的,但 [String, Number] 不能写成字符串 ["String","Number"] ,因为此时它们是构造器,是 js 的全局 api

2. $emit 的使用

$emit 用于向上派发事件,在自定义组件中触发,例如:

methods: {
    changeInput ($event) {
      this.$emit('myInput', $event.target.value)
   },
}

向上派发myInput事件,这样model监听myInput才有意义: 当输入字符时触发input事件,进而派发触发自定义的myInput事件, 然后model监听myInput,就实现了数据绑定。必须注意,这里的派发事件名myInput必须和model中的event的值相同。

PS: 通过watch监听 input标签的值,然后$emit派发事件,和通过@input派发事件具有一样的效果。只要能达到通信的效果即可,手段是多样的。

3. 关键的 model

model是允许 vue 自定义组件使用v-model的关键,虽然有时我们不显性的使用它,也不影响我们在自定义组件中使用v-model指令,这只是因为被设置默认值。而有的时候,显示的使用,并自定义modelpropevent会有益。这是官网关于model的介绍:

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

自定义 model 使用示例:

当我们使用model的默认值的时候valuepropinputevent时,可以省略不写model

model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
},

四、不使用 model 选项的 v-model

当前 , 我们不对 model 选项进行特殊设置 示例:

1. 父组件 home

<template>
  <home-child v-model="vModelData"></home-child>
</template>

<script>
import HomeChild from './child/HomeChild.vue'
export default {
  name: 'Home',
  components: {
    HomeChild
  },
  data () {
    return {
      vModelData: 'hello v-model'
    }
  }
}
</script>

2. 子组件homeChild

<template>
  <div class="box">
    <span>{{ value }}</span>
    <button @click="testVModel">测试v-model</button>
  </div>
</template>

<script>
export default {
  name: 'HomeChild',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    testVModel () {
      this.$emit('input', '我是子组件')
    }
  }
}
</script>

3. 效果

点击前:

点击后:

五、用 model 选项的 组件使用 v-model

1、父组件

<template>
  <div class="home">
    <h3>输入的实时内容:{{ myValue }}</h3>
    <custom-model v-model="myValue"></custom-model>
  </div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
  name: 'Home',
  components: {
    CustomModel,
  },
  data () {
    return {
      myValue: ''
    }
  },
}
</script>

2. 子组件

<template>
  <!-- 自定义组件中使用v-mode指令 -->
  <input type="search" @input="changeInput" data-myValue="">
</template>
<script>
export default {
  name: 'CustomModel',
  // 当我们使用model的默认值的时候value作prop,input作event时,可以省略不写model。
  model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
  },
  props: {
    // 接收string和number类型的值,
    // 注意不能是写成字符串["String","Number"],因为此时它们是构造器,是全局变量
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      // 向上派发myInput事件,这样model监听myInput才有意义:当输入字符时触发input事件,
      // 进而派发触发自定义的myInput事件,然后model监听myInput,就实现了数据绑定
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>

到此这篇关于vue在组件中使用v-model的场景的文章就介绍到这了,更多相关vue使用v-model内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

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

  • 在vue自定义组件中使用 v-model指令详情

    目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件

  • vue中的v-model原理,与组件自定义v-model详解

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" 和 @input="", 就像下面这样 // 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.val

  • vue自定义组件如何通过v-model指令控制组件的隐藏、显示

    目录 通过v-model指令控制组件的隐藏.显示 1.新建一个叫child.vue的vue组件文件 2.将这个组件注册在全局 3.在父组件文件里面写入Child组件 在组件中实现v-model 1.v-model使用的属性和事件 2.自定义组件中输入框的v-model 3.通过v-model控制组件的显示 通过v-model指令控制组件的隐藏.显示 在开发项目的过程中,我们通常会有自定义组件的时候,那么在自定义组件后,我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示.隐

  • Vue使用v-model封装el-pagination组件的全过程

    使用v-model绑定分页信息对象,分页信息对象包括3个核心属性参数,分页事件直接绑定查询数据的方法,消除父组件的handleSizeChange和handleCurrentChange的绑定事件方法. 1.前言   通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法   利用el-pagination组件的常规做法如下:   模板部分: <el-pagination @si

  • vue3组件中v-model的使用以及深入讲解

    目录 v-model input中使用双向绑定数据 组件中的v-model 其他写法 总结 v-model input中使用双向绑定数据 v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码: <template> <input type="text" :value="tryText&q

  • Vue组件更新数据v-model不生效的解决

    目录 组件更新数据v-model不生效 问题描述 原因分析 方法一 方法二 方法三 关于v-model失效的问题 解决办法 组件更新数据v-model不生效 问题描述 在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染. 原因分析 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来回避这些限制并保证它们的响

  • vue在组件中使用v-model的场景

    目录 一.使用场景 二.V-Model的本质 三.关键步骤 1. props 的使用 2. $emit 的使用 3. 关键的 model 四.不使用 model 选项的 v-model 1. 父组件 home 2. 子组件homeChild 3. 效果 五.用 model 选项的 组件使用 v-model 1.父组件 2. 子组件 一.使用场景 子组件想要使用父组件的值,又想去改父组件的值 二.V-Model的本质 1.给子组件的 value 传个变量 2.监听子组件的input事件,并且把传过

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • 详解Vue的组件中data选项为什么必须是函数

    官方解释 data 必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用.只有一个例外:data 必须是函数.实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数.但理解这种规则为何存在也是很有益处的,

  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d

  • vue子组件中mounted取不到props中的值情况

    目录 子组件mounted取不到props的值 方法一 方法二(建议) 组件props第一次取不到值 给值加上sync 使用v-if 在子组件里使用watch 子组件mounted取不到props的值 问题:传到子组建到数据是从接口调用的,导致创建页面的时候把空对象或者数组传给了子组件 方法一 用watch来监听props中值是否有变化 方法二(建议) 调用子组件的时候加上v-if判断,判断数组或者对象是否存在数据 组件props第一次取不到值 给值加上sync <el-dialog title

  • Vue组件中prop属性使用说明实例代码详解

    Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h

  • Vue 子组件更新props中的属性值问题

    目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况 针对以上几种情况再逐一进行分析 结果展示 结论 Vue子组件更新props的属性值 在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model .sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q

  • 分分钟玩转Vue.js组件(二)

    .btn-demo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #19b586; text-decoration: none; border: none; border-radius: 4px; color: #fff !important; text-decoration: none !important; cursor: poi

随机推荐