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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
javascript中的事件代理初探
Mar 08 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
vue小白入门教程
Apr 02 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python 处理数据的实例详解
2017/08/10 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
技能比武方案
2014/05/21 职场文书
医院保洁服务方案
2014/06/11 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
工作态度怎么写
2015/06/25 职场文书
golang import自定义包方式
2021/04/29 Golang
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript