快捷導(dǎo)航

vue控制臺警告Runtime directive used on component with non-element root node

更新時間：2023年06月29日 11:31:51 作者：w晚風(fēng)

這篇文章主要為大家介紹了vue控制臺警告Runtime directive used on component with non-element root node解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

控制臺警告提示信息

控制臺警告Runtime directive used on component with non-element root node. The directives will not function as intended.

如下

原因和解決

意思是自定義指令不能放到組件上，而是要放到自有的元素上,也就是這里用到的v-show，v-if 不能放在自定義組件上,而是放在原來就有的標(biāo)簽上,所以這里套了一層div
比如之前的是這樣子,v-show指令用在了自定義組件UserAdd身上,就警告了

<UserAdd v-show="materialType" />

解決

外面套一層不是自定義組件的元素就可以,我這里套了一層div,你也可以嵌套一層template

<div v-show="materialType">
  <UserAdd />
</div>

或者

<template v-show="materialType">
  <UserAdd />
</template>

以上就是vue控制臺警告Runtime directive used on component with non-element root node的詳細(xì)內(nèi)容，更多關(guān)于vue控制臺警告的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式（Vue2及Vue3區(qū)別）
這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式（Vue2 及 Vue3），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue中數(shù)據(jù)狀態(tài)輪詢過程
文章講述了在Vue中實(shí)現(xiàn)數(shù)據(jù)狀態(tài)輪詢的兩種方法,首先,介紹如何在頁面掛載后請求數(shù)據(jù),并根據(jù)數(shù)據(jù)狀態(tài)決定是否輪詢,在data中定義定時器,并在組件銷毀前清空定時器以防止內(nèi)存泄漏,如果無單獨(dú)的狀態(tài)接口,則將狀態(tài)方法替換為數(shù)據(jù)方法
2025-11-11
如何在vue中使用unocss以及基本使用方法
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個即時的原子CSS引擎,它可以讓你用簡短的類名來控制元素的樣式,而不需要寫復(fù)雜的CSS代碼,需要的朋友可以參考下
2023-07-07
Vite使用Esbuild提升性能詳解
這篇文章主要為大家介紹了Vite使用Esbuild提升性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue子組件改變父組件傳遞的prop值通過sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定(DEMO)
本文通過一個demo給大家介紹了vue子組件改變父組件傳遞的prop值通過sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-02-02
關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計(jì)算屬性)
這篇文章主要介紹了關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計(jì)算屬性),需要的朋友可以參考下
2018-09-09
vue 如何處理防止按鈕重復(fù)點(diǎn)擊問題
這篇文章主要介紹了vue 如何處理防止按鈕重復(fù)點(diǎn)擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方法
Vue3中,雙向數(shù)據(jù)綁定主要通過v-model指令實(shí)現(xiàn),v-model是一個語法糖,結(jié)合了v-bind和v-on指令來實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,它在內(nèi)部做了綁定數(shù)據(jù)和監(jiān)聽輸入事件兩件事,感興趣的朋友跟隨小編一起看看吧
2024-12-12
淺談vue引入css,less遇到的坑和解決方法
下面小編就為大家分享一篇淺談vue引入css,less遇到的坑和解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
vue3深入學(xué)習(xí)?nextTick和historyApiFallback
這篇文章主要介紹了vue3深入學(xué)習(xí)?nextTick和historyApiFallback，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-08-08