vue在自定义组件中使用v-model进行数据绑定的方法
本文介绍了vue v-model进行数据绑定，分享给大家，具体如下
官方例子https://vuefe.cn/v2/api/#model
有这么一句话： 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。
示例：
先来一个组件，不用vue-model，正常父子通信
<!-- parent -->
<template>
<p class="parent">
<p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
<Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
},
methods: {
turnBack(val) {
this.sthGiveChild = val;
}
}
}
</script>
<!-- child -->
<template>
<p class="child">
<p>我是儿子，父亲对我说： {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
props: {
give: String
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>
点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。
改用v-model
<!-- parent -->
<template>
<p class="parent">
<p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
<Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
}
}
</script>
<!-- child -->
<template>
<p class="child">
<p>我是儿子，父亲对我说： {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
props: {
give: String
},
model: {
prop: 'give',
event: 'returnBack'
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>
文案虽有不同，但是效果最终是一致的。
看看官方自定义组件的v-model
官方例子https://vuefe.cn/v2/api/#model
有这么一句话： 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。
尝试把上边子组件的例子改一下，也是跑的通的
<!-- child -->
<template>
<p class="child">
<p>我是儿子，父亲对我说： {{value}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
props: {
value: String
},
methods: {
returnBackFn() {
this.$emit('input', '还你200块');
}
}
}
</script>
做一下总结：
如果你懒，不想自己去处理事件，那就用默认的 'value' && 'input' 事件去处理，如果用原生事件的，甚至连model属性也可以省去。
如果你想自己的代码比较明确，区分出自定义事件，那么下面的组合才是你的菜。
prop和event看你自己心情定义，当然要知名见意【尽量避开关键字】
model: {
prop: 'someProp', // 注意，是prop，不带s。我在写这个速记的时候，多写了一个s，调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue模板语法中数据绑定的实例代码
1.单项数据绑定 <div id="di"> <input type="text" :value="input_val"> </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) </script> 通过浏览器 REPL 环境可以进行修改 app.input_val = '
-
vue3.0中的双向数据绑定方法及优缺点
熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object.defineProperty的缺点: 1. 在Vue中,Object.defineProperty无法监控到数组下标的变化, 导致直接通过数组的下标给数组设置值,不能实时响应. push() pop() shift() unsh
-
Vue组件内部实现一个双向数据绑定的实例代码
思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下: import Vue from 'vue' const component = { props: ['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, data
-
Vue数据绑定简析小结
作为MVVM框架的一种,Vue最为人津津乐道的当是数据与视图的绑定,将直接操作DOM节点变为修改 data 数据,利用 Virtual Dom 来 Diff 对比新旧视图,从而实现更新.不仅如此,还可以通过 Vue.prototype.$watch 来监听 data 的变化并执行回调函数,实现自定义的逻辑.虽然日常的编码运用已经驾轻就熟,但未曾去深究技术背后的实现原理.作为一个好学的程序员,知其然更要知其所以然,本文将从源码的角度来对Vue响应式数据中的观察者模式进行简析. 初始化 Vue 实例
-
Vue数据绑定实例写法
为什么绑定 简单的数据渲染,包括表达式.函数在内.其实都只是在标签中渲染,如果遇到以下情况怎么办呢: 需要在标签内部进行某种 "骚操作" . 需要控制流来控制不同数据下的不同渲染效果. 需要渲染一个数组. 这时候简单渲染就不能很好的解决问题了,怎么办 ? 来一发数据绑定吧! 绑定是什么 在了解绑定是什么之前,先了解一下什么是指令: 在 " vue" 中,指令是带有 v- 前缀的特殊属性,用来修饰标签的(自定义组件在这里也统一归为标签,因为其使用方式和原生标签一样),
-
vue在自定义组件中使用v-model进行数据绑定的方法
本文介绍了vue v-model进行数据绑定,分享给大家,具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <p class="parent"> <p>我是父亲, 对儿
-
在vue自定义组件中使用 v-model指令详情
目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件
-
vue.js自定义组件directives的实例代码
自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行
-
vue在自定义组件上使用v-model和.sync的方法实例
目录 自定义事件 自定义组件的v-model .sync 修饰符 思考 总结 自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model 用法: 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data"进行传递 默认传递的属性名是value,事件名为input.可以在子组件中配置model选项重命名属性名和事件
-
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内
-
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的自定义组件不能使用click方法的解决
先贴代码 var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//names为按钮名,item2为数据 template: '<span><span v-for="obj in item2" v-if="obj.name==names" v-html="obj.code"></span></span>' }) Vue.compone
-
基于Vue实现自定义组件的方式引入图标
前言 在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标. 搭建环境 这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用. 安装: npm install --save-dev svg-sprite-loader 配置vue.config.js 在安装svg-sprite-loader后,新建vue.co
-
vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解
vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用,供大家参考,具体内容如下 如下图所示,点击上传组件,选择文件后,会立马弹出图片裁剪功能组件的页面 问题描述: 1.在使用upload组件中,如果修改fileList中的内容,浏览器会报错2.获取上传的文件,传递给图片裁剪组件(在on-change中获取文件并传递个裁剪组件)3.要获取裁剪后的图片即File文件(将裁剪后的图片返回出去)4.获取到裁剪后的file调用上传的接口 由于el-upload组件默认使用的是“选
-
在Vue组件中获取全局的点击事件方法
使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"