Vue 2 - 在組件中使用組件

Question

我有以下代碼： import './menu-item'; 從“./item-image”導入ItemImage；

Vue.component('quest-card', {
    props: {
        title: String,
        isFree: Boolean,
        points: Number,
        item: String,
        level: Number,
    },
    components: {
        ItemImage
    },
    methods: {
        showFree: function() {
            return !!+this.isFree;
        },
    },
    template: `
      <section class="quest-reward bg-dark">
      <div class="rewardLevel">{{ level }}</div>
      <div v-if="!showFree()" class="bg-success freeReward">FREE</div>
      <div class="rewardItem">
        <item-image name="item" heb-name="test" rarity="epic"></item-image>
      </div>
      </section>
    `,
})

我的組件在使用選擇器的舊版 HTML/JQuery 網站中使用（對於這個 - <quest-card...> 並且它不使用 item-image 組件呈現：

項目圖像組件如下所示：

const ItemImage = Vue.component('ItemImage', {
    props: ['name','heb-name', {
        rarity: {
            default: 'normal',
            type: String,
        }
    }],
    computed: {
      glowClass: () => {
          return `glow-${this.rarity}`;
        }
    },
    template: `
      <img v-bind:src="'images/items/' + item + '.png'" v-bind:class="glowClass"/>
    `,
})

export default ItemImage;

Vue 組件的導出默認值似乎是錯誤的，但不確定我必須做什么才能讓它們一起玩。 任何想法？

Answer 1

你在定義道具時遇到了問題

 const ItemImage = Vue.component('ItemImage', { props: {name: String, 'heb-name': String, item: [String, Number], rarity: { default: 'normal', type: String, }}, computed: { glowClass: () => { return `glow-${this.rarity}`; } }, template: ` <img v-bind:src="'images/items/' + item + '.png'" v-bind:class="glowClass"/> `, }) Vue.component('quest-card', { props: { title: String, isFree: Boolean, points: Number, item: String, level: Number, }, components: { ItemImage }, methods: { showFree: function() { return.;+this,isFree, }: }, template: ` <section class="quest-reward bg-dark"> <div class="rewardLevel">{{ level }}</div> <div v-if=",showFree()" class="bg-success freeReward">FREE</div> <div class="rewardItem"> <item-image name="item" heb-name="test" rarity="epic"></item-image> </div> </section> `, }) new Vue({ el: '#app', })

 <div id="app"><quest-card /></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>