时间戳

首页 > 解决方案 > 无法解析 vue 中的组件

vue.js - 无法解析 vue 中的组件

问题描述

在 Content.vue 我有一行：let html = this.html.replace('[BuyHere]', '<buy-button :label="label"></buy-button>');这导致“无法解析组件：购买按钮”警告。如果我删除参考，则替换有效，但我不明白为什么会收到此警告，因为我相信我已经正确导入并声明了它。

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

应用程序.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <ContentView/>
</template>

<script>
import ContentView from './components/ContentView.vue'

export default {
  name: 'App',
  components: {
    ContentView
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

内容.vue

<template>

    <component v-bind:is="processedHtml"></component>

</template>
<script>

    import BuyButton from "./BuyButton.vue"

    export default {
        name: 'ContentView',
        components: {
            BuyButton
        },        
        data () {
            return {
                html: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>[BuyHere]<p>Donec tellus arcu, rhoncus eget leo sit amet, blandit aliquam sapien.</p><p>Aenean leo ligula, ultricies non nisi non, laoreet mattis arcu.</p>',
                label: 'Buy Here! -10% Off',
            }
        },
        computed: {

            processedHtml () {
                let html = this.html.replace('[BuyHere]', '<buy-button :label="label"></buy-button>');
                return {
                    template: '<div>' + html + '</div>',
                    props: {
                        label: {
                            type: null,
                            default: () => { return this.label }
                        },
                    }
                }
            }
        }
    }

</script>

BuyButton.vue

<template>

    <input type="button" :value="label">

</template>
<script>

    export default {
        name: 'BuyButton',
        props: ['label']
    }

</script>

标签： vue.jsvuejs3

解决方案

components: {
  BuyButton
},

是本地注册。本地表示该组件仅ContentView在组件模板中被识别

通过将对象（processedHtml- 组件的选项对象的返回值）传递给v-bind:is您，您基本上是在创建一个新的“未命名”组件并BuyButton在其模板中使用该组件，但它没有在那里注册......

使固定：

processedHtml () {
                let html = this.html.replace('[BuyHere]', '<buy-button :label="label"></buy-button>');
                return {
                    components: {
                      BuyButton
                    },
                    template: '<div>' + html + '</div>',
                    props: {
                        label: {
                            type: null,
                            default: () => { return this.label }
                        },
                    }
                }
            }

https://v3.vuejs.org/api/special-attributes.html#is

推荐阅读