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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
js获取height和width的方法说明
Jan 06 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
解决包含在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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JS获取URL中的参数数据
2013/12/05 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
EM算法的python实现的方法步骤
2018/01/02 Python
pandas object格式转float64格式的方法
2018/04/10 Python
在python 中实现运行多条shell命令
2019/01/07 Python
解决yum对python依赖版本问题
2019/07/05 Python
详解python 中in 的 用法
2019/12/12 Python
pytorch之添加BN的实现
2020/01/06 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python两种注释用法的示例
2020/10/09 Python
利用python 下载bilibili视频
2020/11/13 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
促销活动总结
2014/04/28 职场文书
培训讲师开场白
2015/06/01 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android