乐趣区

vue-父组件通过vmodel接收子组件的值

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

`

退出移动版