vue v-model 简单使用
最近在写组件时,考虑到子组件的状态需要实时反馈给父组件,于是想起来了v-model,下面介绍一下自定义组件中的简单使用
官网介绍不是很清晰,这个默认的input事件很容易让人产生误解,其实个人建议还是不要使用默认的prop和event,尽量重新定义。
我的子组件
<template>
<div>
<el-select v-model="id" style="margin-bottom:20px" @change="handleChange" :multiple="multiple">
<el-option class="item" v-for="item in channelArr" :key="item.channel" :label="item.channel + ' ' + item.name" :value="item.channel">
<div v-if="item.pic"><img class="item-icon" :src="item.pic" alt=""><span>{{item.channel + ' ' + item.name}}</span></div>
</el-option>
</el-select>
</div>
</template> <script>
import {
getChannelAPI,
} from '@/api/data'
export default {
name: 'UserChannel',
model: {
prop: 'id', // 坑点 这里官方文档和props是一个名字,都是checked 但在使用过程中会报错,多番排查后, 将model里的prop新定义一个名字,为了保证和props里父组件传过来的channelId一致,在子组件data中进行赋值,就不再报错了。
event: 'change' // event 名称可以随便起 emit 里对应就行,这里配合业务起的是change
},
// 如果model不写就会走默认的model prop:value , event : input 不要被input所迷惑,并不一定代表js的oninput事件
props: {
hasChange:{
type: Boolean,
default: false
},
channelId:{
type:String,
default:''
},
multiple:{
type:Boolean,
default:false
}
},
data() {
return {
channelArr: [],
id:this.channelId
}
},
created(){
this.getChannel()
},
methods: {
getChannel() {
if (this.channelArr.length == 0) {
getChannelAPI().then(response => {
this.channelArr = response.data.channeArr;
}); }
},
handleChange(event){
// this.$emit('someProp', [returnValueToParent]) returnValueToParent 是什么,父组件的v-model 就是多少
this.$emit('change', event);
if(this.hasChange){
this.$emit('fetch', event)
}
},
}
}
</script>
<style scoped>
.item{
margin-bottom: 6px;
}
.item-icon{
width: 30px;
height: 30px;
vertical-align: middle;
border-radius: 50%;
margin-right: 20px;
}
</style>
父组件
<template>
<div>
<user-channel v-model="channel"></user-channel>
</div>
<template> <script>
import UserChannel from '@/components/UserChannel'
export default {
components:{
UserChannel
},
data() {
return {
channel:''
}
......
</script>
主要的坑就是变量问题,已经写在子组件里了。比传统的父子组件传值还是更好用的。
vue v-model 简单使用的更多相关文章
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
- 前台vue的使用简单小结
前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
- axios在Vue中的简单应用(一)
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- vue - vue + vue-router + vuex 简单项目
简单的,我的首页,我的笔记项目 vue + vue-router + vuex View + VM(ViewModel) + Model (webpack) vue init webpack lint ...
- 学习vue就是那么简单,一个简单的案例
vue是前端兴起的一个javascript库,相信大家都使用过jQuery,虽然vue和jQuery没有可比性,但从熟悉的角度去理解新的东西或许会容易接受一些,有时候由于思想和模式的转变会带来阵痛,但 ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
随机推荐
- HDU 2827 高斯消元
模板的高斯消元.... /** @Date : 2017-09-26 18:05:03 * @FileName: HDU 2827 高斯消元.cpp * @Platform: Windows * @A ...
- ubuntu11下安装文件
1.ubuntu11下安装.run文件 首先右键单击这个文件,在properties-permissions那里选择允许以程序执行(打钩Allow executing file as program) ...
- WPF技术点
常用Path路径 正三角形(左):<Path Data="M40,0 L0,30 40,60 z" Stretch="Uniform"/> 正三角形 ...
- [linux]ubuntu在线安装mysql
1. sudo apt-get install mysql-server 2. apt-get isntall mysql-client 3. sudo apt-get install li ...
- styled-components真的好吗?
最近在学习react,然后遇到react中css该怎么写这个问题,上知乎上看了好多大牛都说styled-components好用是大势所趋. 但我自己用了感觉体验却很差,我在这里说说我为啥觉得styl ...
- lintcode 40. 用栈实现队列
使用两个栈来回倒腾可以实现队列. AC代码: import java.util.Stack; public class Queue { private Stack<Integer> sta ...
- Aragorn's Story 树链剖分+线段树 && 树链剖分+树状数组
Aragorn's Story 来源:http://www.fjutacm.com/Problem.jsp?pid=2710来源:http://acm.hdu.edu.cn/showproblem.p ...
- vuex实例详解
vuex是一个专门为vue.js设计的集中式状态管理架构.状态?把它理解为在data中的属性需要共享给其他vue组件使用的部分. 简单的说就是data需要共用的属性 一.小demo 已经用Vue脚手架 ...
- 《深入理解Java虚拟机》笔记--第四章、虚拟机性能监控与故障处理工具
主要学习并记录在命令行中操作服务器时使用的六大命令工具,可视化工具JConsole和VisualVM在开发过程中熟悉. 一.jps:虚拟机进程状况工具(JVM Process Status Tool) ...
- ansible报错AttributeError: module 'urllib.request' has no attribute 'HTTPSHandler'
报错内容: TASK [activemq : extract activemq tarball] *************************************************** ...