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

Question

我通过 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 }">

谢谢大家!

Answer 1

向 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>