vue 父組件通過v-model接收子組件的值的代碼
更新時(shí)間：2019年10月27日 11:20:35 作者：弱雞的前端程序員
這篇文章主要介紹了vue 父組件通過v-model接收子組件的值的代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
具體代碼如下所述：
<template>
<div>
<el-select
v-model="typeValue"
placeholder="請(qǐng)選擇包類型"
@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>
總結(jié)
以上所述是小編給大家介紹的vue 父組件通過v-model接收子組件的值的代碼，希望對(duì)大家有所幫助！
相關(guān)文章
詳解element-ui日期時(shí)間選擇器的日期格式化問題
這篇文章主要介紹了詳解element-ui日期時(shí)間選擇器的日期格式化問題，本文用到了DateTimePicker來選擇日期時(shí)間，但是在將數(shù)據(jù)傳回后臺(tái)的過程中遇到了一些令人頭疼的問題，有興趣的一起來了解一下2019-04-04
vue+tp5實(shí)現(xiàn)簡(jiǎn)單登錄功能
這篇文章主要為大家詳細(xì)介紹了vue+tp5實(shí)現(xiàn)簡(jiǎn)單登錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
element?ui?el-calendar日歷組件使用方法總結(jié)
這篇文章主要給大家介紹了關(guān)于element?ui?el-calendar日歷組件使用方法的相關(guān)資料,elementui是一款基于Vue.js的UI框架,其中的日歷組件calendar是elementui中非常常用的組件之一,需要的朋友可以參考下2023-07-07
vue經(jīng)歷從2.0到3.0更新之后,簡(jiǎn)??之就是變得更輕更快,使?起來更加?便,下面這篇文章主要給大家介紹了關(guān)于vue3.0和vue2.0區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-10-10
詳解如何使用webpack在vue項(xiàng)目中寫jsx語法
本篇文章主要介紹了詳解如何使用webpack在vue項(xiàng)目中寫jsx語法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue使用nprogress實(shí)現(xiàn)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue使用nprogress實(shí)現(xiàn)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題
我的頁面是從一個(gè)vue頁面router跳轉(zhuǎn)到另一個(gè)vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個(gè)頁簽,但是不知道為什么有時(shí)候可以有時(shí)候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題,需要的朋友可以參考下2024-03-03
用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會(huì)返回重名文件的名稱數(shù)組,這些文件需要一個(gè)一個(gè)的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下2024-02-02
最近在研究uni-app跨端開發(fā)APP和H5的通訊和交互,比如H5調(diào)用APP的方法,APP往H5里面?zhèn)鲄?H5往app外面?zhèn)鲄?這篇文章主要給大家介紹了關(guān)于uniapp?webview和H5通信的3種方式,需要的朋友可以參考下2024-04-04
這篇文章主要為大家介紹了Vue開發(fā)實(shí)例探究key的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01