环境说明: vue-cli(vue 3.x) + ant-vue
父组件(Album.vue)使用:
<template>
<div>
<a-button type="primary" icon="plus" @click="uploadImage">图片</a-button>
<upload-image :visible.sync="visible"></upload-image>
</div>
</template>
<script>
import UploadImage from "./UploadImage";
export default {
name: "Album",
components: { UploadImage },
data: function() {
return {
visible: false
};
},
methods: {
uploadImage() {
this.visible = true;
}
}
};
</script>
<style scoped>
</style>
子组件(UploadImage.vue):
<template>
<a-modal
:title="title"
:visible="visible"
@cancel="handleCancel"
@ok="handleOk"
>
<h1>Some text here</h1>
</a-modal>
</template>
<script>
export default {
name: "UploadImage",
props: {
title: {
type: String,
default: "上传图片"
},
visible: {
type: Boolean,
default: false,
required: true
}
},
data: function() {
return {
}
},
methods: {
handleCancel() {
this.$emit('update:visible', false);
},
handleOk() {
this.$emit('update:visible', false);
}
}
};
</script>
<style lang="less" scoped>
</style>
综合:
1. 父组件使用时通过属性传递一个值到子组件, 并添加.sync修饰符
2. 子组件得到初始值后,若是修改了属性的值,通过this.$emit('update:xxx', newValue)修改父组件中绑定的变量值!
3. 注意子组件中v-model不能绑定一个属性, 因为属性是单向数据流,但是v-model需要绑定的是一个双向数据流的变量!