gpt4 book ai didi

javascript - VueJS 将属性绑定(bind)到 App.vue 中的组件

转载 作者:行者123 更新时间:2023-11-28 14:16:32 29 4
gpt4 key购买 nike

我通过 VUE CLI 使用 VueJS,并有一个名为 Icon.vue 的组件。该组件有一个变量,应由 App.vue 文件设置。我怎样才能实现这个目标?

这是我的 App.vue 文件:

<template>
<div id="app">
<Icon iconUrl="../assets/img/plant-icon-1.svg" iconAlt="Blume"/>
</div>
</template>

<script>
import Icon from './components/Icon.vue'

export default {
name: 'app',
components: {
Icon
}
}
</script>

这是我的 Icon.vue 文件:

<template>
<div class="container iconBar">
<div class="row">
<div class="col text-center py-5">
<img :src="{ iconUrl }" :alt="{ iconAlt }">
</div>
</div>
</div>
</template>

我错过了什么?前端没有生成任何内容。它只是空的。

<小时/>

更新

按照建议,我像这样编辑了 Icon.vue。但仍然没有输出。在前端,我在 alt-Tag 中得到一个空图像和一个 [object Object] 输出

<template>
<div class="container iconBar">
<div class="row">
<div class="col text-center py-5">
<img :src="{ iconUrl }" :alt="{ iconAlt }">
</div>
</div>
</div>
</template>

<script>
export default {
props: {
iconUrl: {
type: String,
required: true
},
iconAlt: {
type: String,
required: true
}
}
}
</script>

<小时/>

更新2

现在可以了。错误是我调用了一个对象而不是字符串。因此你必须写

        <img :src="iconUrl" :alt="iconAlt">

而不是

        <img :src="{ iconUrl }" :alt="{ iconAlt }">

谢谢大家!

最佳答案

向 Icon 组件添加一个 prop,如下所示:

<template>
<div class="container iconBar">
<div class="row">
<div class="col text-center py-5">
<img :src="iconUrl" :alt="iconAlt">
</div>
</div>
</div>
</template>

<script>
export default {
props: ['iconUrl', 'iconAlt']
}
</script>

查看文档:https://v2.vuejs.org/v2/guide/components-props.html

您还可以向其添加验证,以确保它已提供并且是一个字符串:

<script>
export default {
props: {
iconUrl: {
type: String,
required: true
}
}
}
</script>

关于javascript - VueJS 将属性绑定(bind)到 App.vue 中的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57185915/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com