[英]VueJS bind attribute to component in App.vue
I am using VueJS via VUE CLI and have a component called Icon.vue.我通过 VUE CLI 使用 VueJS,并且有一个名为 Icon.vue 的组件。 This component has a variable which should be set by the App.vue file.
这个组件有一个变量,应该由 App.vue 文件设置。 How can i achieve this?
我怎样才能做到这一点?
This is my App.vue file:这是我的 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>
and there's my Icon.vue file:还有我的 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>
What am i missing?我错过了什么? Nothing is generated in the frontend.
前端没有生成任何内容。 It's just empty.
它只是空的。
As suggested i edited my Icon.vue like this.正如建议的那样,我像这样编辑了我的 Icon.vue。 But still NO output.
但仍然没有输出。 In the frontend i get an empty image and an
[object Object]
output in the alt-Tag在前端,我在 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>
Now it works.现在它起作用了。 The fault was that i called an object and not the string.
错误是我调用了一个对象而不是字符串。 Therefore you have to write
因此你必须写
<img :src="iconUrl" :alt="iconAlt">
instead of代替
<img :src="{ iconUrl }" :alt="{ iconAlt }">
Thanks everyone!感谢大家!
Add a prop to the Icon component, like so:向 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>
take a look at the documentation: https://v2.vuejs.org/v2/guide/components-props.html看看文档: https ://v2.vuejs.org/v2/guide/components-props.html
You could also add validation to it to ensure it's supplied and is a string:您还可以向它添加验证以确保它被提供并且是一个字符串:
<script>
export default {
props: {
iconUrl: {
type: String,
required: true
}
}
}
</script>
In your Icon.vue file, add your props.在您的 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>
<script>
export default {
props: ['iconUrl', 'iconAlt'],
}
</script>
Consider not using camelcase convention to call props in your component instead use kebab-case like this:考虑不要使用驼峰式约定来调用组件中的道具,而是使用 kebab-case 如下所示:
Vue.component('icon-component', { props: ['iconName', 'iconAlt'], data () { return { iconUrl: '../assets/img/' + this.iconName + '.svg' } }, template: ` <div class="container iconBar"> <div class="row"> <div class="col text-center py-5"> <img :src="iconUrl" :alt="iconAlt"> <p>icon url path: {{ iconUrl }}</p> </div> </div> </div> `, }) new Vue({ el: "#app" })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <icon-component icon-name="plant-icon-1" icon-alt="Blume" /> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.