VueJS将属性绑定到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标签中输出了[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组件添加道具，如下所示：

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

Answer 2

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

Answer 3

考虑不使用驼峰约定来在组件中调用道具，而是使用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>