我在一個獨立的 Vue 組件中有一個模板，它被插入到一個液體檔案中。為了避免樣式沖突，我決定創建自定義標簽，因為在我的情況下 iFrame 不起作用。
這些標簽不是組件，它們只是替換div span和其他標準 HTML 標簽，這些標簽帶有我試圖避免的獨特樣式。我也嘗試過all: unset類似的 CSS hack，但沒有效果。我需要這些標簽。
但是，我現在收到以下警告：
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
uj5u.com熱心網友回復：
視圖 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')
演示 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')
演示 2
uj5u.com熱心網友回復：
您可以嘗試將 v-pre 指令添加到自定義標簽中，如下所示：Vue ignore custom component tag
但請注意，這會阻止呈現自定義標簽中的所有 vue 元素：https ://vuejs.org/api/built-in-directives.html#v-pre
不幸的是，如果不使用常規標簽或真正的 vue 組件，我沒有辦法擺脫警告。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461768.html
標籤：Vue.js