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 相关文章推荐
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
解决包含在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生成动态验证码gif图片
2015/10/19 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js分页代码分享
2014/04/28 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
原生js轮播特效
2017/05/18 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python按钮的响应事件详解
2019/03/04 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python定义函数实现累计求和操作
2020/05/03 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
2014年优秀党员材料
2014/12/18 职场文书
党支部书记岗位职责
2015/02/15 职场文书
小学感恩节活动总结
2015/03/24 职场文书