vue父组件给子组件传递一个地址,只组件在el-upload里面回显这个地址
时间: 2023-11-19 15:06:39 浏览: 98
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
可以在父组件中定义一个变量,用来保存地址,然后通过props属性将这个地址传递给子组件。在子组件中,可以使用这个地址来设置el-upload组件的默认值。
父组件中的代码:
```vue
<template>
<div>
<child-component :default-file-url="fileUrl"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
fileUrl: 'http://example.com/file.jpg' // 地址变量
}
}
}
</script>
```
子组件中的代码:
```vue
<template>
<div>
<el-upload
action="/upload"
:default-file-list="defaultList"
:show-file-list="false">
<el-button slot="trigger" size="small" type="primary">选择文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
props: {
defaultFileUrl: {
type: String,
default: ''
}
},
computed: {
defaultList() {
if (this.defaultFileUrl) {
return [{
url: this.defaultFileUrl
}]
} else {
return []
}
}
}
}
</script>
```
在上面的代码中,子组件接收了父组件传递的`defaultFileUrl`属性,并且通过计算属性将其转换为默认文件列表`defaultList`。最后,将`defaultList`作为`el-upload`组件的`default-file-list`属性值即可。
阅读全文