父子组件间传值

环境说明: vue-cli(vue 3.x) + ant-vue

父组件(Album.vue)使用:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<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):

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<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需要绑定的是一个双向数据流的变量!