脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 自定义组件使用v-model

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

 更新时间：2019年10月11日 15:08:46   作者：RocChan  
这篇文章主要介绍了详解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的事件，而是直接传目标值。

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

您可能感兴趣的文章:

相关文章

  • Vue前后端不同端口的实现方法

    Vue前后端不同端口的实现方法

    今天小编就为大家分享一篇Vue前后端不同端口的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • el-select如何获取下拉框选中label和value的值

    el-select如何获取下拉框选中label和value的值

    在开发业务场景中我们通常遇到一些奇怪的需求,例如el-select业务场景需要同时获取我们选中的label跟 value,下面这篇文章主要给大家介绍了关于el-select如何获取下拉框选中label和value的值,需要的朋友可以参考下
    2022-10-10
  • vue router权限管理实现不同角色显示不同路由

    vue router权限管理实现不同角色显示不同路由

    本文主要介绍了vue router权限管理实现不同角色显示不同路由，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 前端Vue如何获取登录的用户名或用户id代码实例

    前端Vue如何获取登录的用户名或用户id代码实例

    在前端开发中,获取登录用户的用户名是一项常见的需求,这篇文章主要给大家介绍了关于前端Vue如何获取登录的用户名或用户id的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue3中如何使用Pinia实现数据持久化操作

    vue3中如何使用Pinia实现数据持久化操作

    使用vue3中的pinia,我们可以在多个页面间共享数据,但是一旦我们关闭或刷新页面,这些数据就会丢失,因此,我们需要有一种数据持久化的解决方案,下面我们就来看看具体如何解决的吧
    2023-10-10
  • Vue导入Echarts实现折线散点图

    Vue导入Echarts实现折线散点图

    这篇文章主要为大家详细介绍了Vue导入Echarts实现折线散点图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Element Dialog对话框的使用示例

    Element Dialog对话框的使用示例

    这篇文章主要介绍了Element Dialog对话框的使用示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue分页插件的前后端配置与使用

    Vue分页插件的前后端配置与使用

    这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Vue 无限滚动加载指令实现方法

    Vue 无限滚动加载指令实现方法

    这篇文章主要介绍了Vue 无限滚动加载指令的实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • Vue2+element-ui实现面包屑导航

    Vue2+element-ui实现面包屑导航

    这篇文章主要为大家详细介绍了Vue2+element-ui使用面包屑导航的正确姿势，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论