Vue 独立组件在自定义标签上获取未知的自定义元素

Question

我在一个独立的 Vue 组件中有一个模板，它被插入到一个 liquid 文件中。为了避免样式冲突，我决定创建自定义标签，因为在我的情况下 iFrame 不起作用。

这些标签不是组件，它们只是 div span 和其他带有我试图避免的独特样式的标准 HTML 标签的替代品。我也试过 all: unset 和类似的 CSS hacks 没有效果。我需要这些标签。

但是，我现在收到以下警告： Unknown custom element: <freshie-div> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

由于这些不是组件，我不确定如何消除此警告。删除警告很重要，因为客户会看到警告并失去理智。

下面是一些精简代码：

  template: 
`
<freshie-div :style="divStyle">
  <freshie-div :style="buttonContainer" v-if="displayLauncherButton">
    <freshie-button 
      :style="buttonStyle"
      @click="openCreditPanel()"
    >${ returnLauncherText }</freshie-button>
  </freshie-div>
 `

除了自定义标签，没什么特别疯狂的。

编辑：我正在使用 Vue.component('freshie', { 而不是 Vue.createApp({

创建我的组件

似乎正因为如此，它才行不通：

  components: {
    'freshie-div': 'div',
    'freshie-span': 'span',
    'freshie-button': 'button'
  },

我收到以下错误：Invalid Component definition: button

Answer 1

您可以尝试将 v-pre 指令添加到此处指出的自定义标签：

但请注意，这会阻止呈现自定义标签中的所有 vue 元素：https://vuejs.org/api/built-in-directives.html#v-pre

不幸的是，如果不使用常规标签或真正的 vue 组件，我看不出有什么方法可以消除警告。

Answer 2

Vue 3

您可以将这些组件注册为本机元素的别名：

const app = Vue.createApp({
  template: `<freshie/>`
})

app.component('freshie', {
  components: {
    'freshie-div': 'div', 
    'freshie-h1': 'h1', 
    'freshie-button': 'button' 
  },
  template: `<freshie-div>
    <freshie-h1>Hi there</freshie-h1>
    <freshie-button @click="onClick">Click</freshie-button>
  </freshie-div>`,
  methods: {
    onClick() {
      alert('hello world')
    }
  }
})

app.mount('#app')

demo 1

Vue 2

在 Vue 2 中，别名必须使用 template 选项完成：

Vue.component('freshie', {
  components: {
    'freshie-div': { template: `<div v-on="$listeners" v-bind="$attrs"><slot/></div>` }, 
    'freshie-h1': { template: `<h1 v-on="$listeners" v-bind="$attrs"><slot/></h1>` }, 
    'freshie-button': { template: `<button v-on="$listeners" v-bind="$attrs"><slot/></button>` }, 
  },
  template: `<freshie-div>
    <freshie-h1>Hi there</freshie-h1>
    <freshie-button @click="onClick">Click</freshie-button>
  </freshie-div>`,
  methods: {
    onClick() {
      alert('hello world')
    }
  }
})
  
new Vue({
  template: `<freshie/>`
}).$mount('#app')

demo 2

Vue 独立组件在自定义标签上获取未知的自定义元素

Vue standalone component getting Unknown custom element on custom tags

vue.js

Vue 3

Vue 2