详解vue 自定义组件使用v-model 及探究其中原理

1、首先我们来实现自定义组件中使用v-model

父组件中注册子组件

<template>
 <div id="app">
  <p>{{name}}</p>
  <MyInput v-model="name"/>
 </div>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
 name: 'app',
 data(){
  return {
   name: 132
  }
 },
 components: {
  MyInput
 },
}
</script>

子组件接收父组件传值

<template>
  <div>
    <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
  </div>
</template>
<script>
export default {
 name: "MyInput",
 props: {
  value: ""
 },
};
</script>

2.探究v-model

在input中的v-model功能是实现数据的双向绑定，即绑定name值及改变值。

工作等同于以下代码:

<input type="text" v-bind:value="name" v-on:input="event=>name=event.target.value" />

v-bind将name的值绑定到value

v-on绑定input事件，当事件触发时将事件目标值赋值给name

而在自定义标签中的v-model与在input中的功能一致，但绑定的事件有些许不同，如下：

<MyInput type="text" v-bind:value="value" v-on:input="value=>name=value" />

在子组件中使用$emit触发MyInput中的input事件，此时$emit并不能传input的event的事件，而是直接传目标值。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js指令v-model使用方法

    vue.js指令v-model使用方法

    vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g

  • vue如何在自定义组件中使用v-model

    v-model指令 所谓的"指令"其实就是扩展了HTML标签功能(属性). 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child @returnBack="turnBack" :give="st

  • 浅谈 Vue v-model指令的实现原理

    浅谈 Vue v-model指令的实现原理

    vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定, 我们来看一下它的效果: 输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化 我们可以参照官方文档的例子    http://cn.vuejs.org/v2/guide/forms.html#文本 我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的 如此神奇的效果是如何实现的呢? 还是参照官方文档 http://cn.vuejs.org/v2/guide/co

  • vue中v-model的应用及使用详解

    vue中v-model的应用及使用详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model本质上是一个语法糖.如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.t

  • Vue 进阶教程之v-model详解

    Vue 进阶教程之v-model详解

    Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2  v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • VUE中v-model和v-for指令详解

    VUE中v-model和v-for指令详解

    1.基本雏形 <!DOCTYPE html> <html> <head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue

  • vue 2.0组件与v-model详解

    前言 大家可能乍一看这个标题,可能会有疑问:v-model和组件也能扯到一起?在打算写这篇文章的时候,也是这么想的.咱们按简历的那一套STAR法则来梳理一下这篇文章: 情景[Situation]: 编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA, 而是父组件可以直接this.dataA就可以取到当前子组件最新值. 任务[Task]: 实现在父组件直接this.dataA就可以取到当前子

  • vue v-model动态生成详解

    1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成,此时就不可以用 v-model绑定,而是用传统的方法 value 动态绑定,并且用子组件绑定向父组件传递值和事件. 代码如下: //子组件 <template> <input v-if="type === 0" type="text" :value="currentValue" @change="handleInput">

  • vue.js指令v-model实现方法

    V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个语法糖. 实际是通过下面的代码来实现的: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en">

  • 对Vue- 动态元素属性及v-bind和v-model的区别详解

    Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令: <div v-bind:id="dynamicId"></div> 这对布尔值的属性也有效 -- 如果条件被求值为 false 的话该属性会被移除: <button v-bind:disabled="someDynamicCondition">Button</button> 从一开始学习的时候我们就知道v-bind是可以绑定属

随机推荐