vue 父组件通过v-model接收子组件的值的代码


Posted in Javascript onOctober 27, 2019

具体代码如下所述:

<template>
<div>
<el-select
 v-model="typeValue"
 placeholder="请选择包类型"
 @change='typeValChange'
>
 <el-option
  v-for="item in typeData"
  :key="item.id"
  :label="item.label"
  :value="item.id"
  :disabled="item.disabled"
 >
 </el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "AppTypeSelect",
props: {},
data: function() {
return {
 typeData: [{ label: "t1", id: 1 }, { label: "t2", id: 2 }],
 typeValue: ""
};
},
methods: {
typeValChange() {
 console.log(this.typeValue);
 this.$emit("input", this.typeValue);
}
}
};
</script>
<style scoped>
</style>

`这是子组件

下面这是父组件
`

<template>
<div>
<AppTypeSelect v-model="absc" />
</div>
</template>
<script>
import { getModelList, deleteModel } from "@/api/model";
import AppTypeSelect from "@/components/AppTypeSelect";
export default {
name: "abcs",
components: { AppTypeSelect },
data() {
return {
 listQuery: {
  page: "1"
 },
 loading: false,
 form: {
  config_id: ""
 },
 tableData: [],
 pageCount: 0,
 addDialogVis: false,
 absc:''
};
},
watch:{
absc:function(val){
 console.log(val)
}
},
methods: {
}
};
</script>
<style scoped>
.line {
text-align: center;
}
.page-title {
height: 30px;
color: #409eff;
}
label {
color: #606266;
font-size: 16px;
}
</style>

总结

以上所述是小编给大家介绍的vue 父组件通过v-model接收子组件的值的代码,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 #Javascript
Vue-Cli项目优化操作的实现
Oct 27 #Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 #Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
vue-router的钩子函数用法实例分析
Oct 26 #Javascript
VUE兄弟组件传值操作实例分析
Oct 26 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
vuex的简单使用教程
2018/02/02 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
优秀应届毕业生推荐信
2014/02/18 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
工伤事故证明
2014/10/20 职场文书
python 调用js的四种方式
2021/04/11 Python
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL