環境說明: 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 {<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>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需要綁定的是一個雙向數據流的變量!

總結

以上是生活随笔為你收集整理的[vue] 父子组件间传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。