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

我通过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组件添加一个道具，如下所示：

<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://vuejs.org/v2/guide/components-props.html

您还可以向其添加验证，以确保它已提供并且是字符串：

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