vue 父組件通過v-model接收子組件的值

`
<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>

`

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章