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 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
如何在postman测试用例中实现断言过程解析
Jul 09 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
php表单处理操作
2017/11/16 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
详谈python http长连接客户端
2017/06/12 Python
python 常用的基础函数
2018/07/10 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python 硬币兑换问题
2019/07/29 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
迷你西餐厅创业计划书范文
2013/12/31 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
结对共建工作方案
2014/06/02 职场文书
新手上路标语
2014/06/20 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
房屋买卖协议样本
2014/11/16 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL