Web-Frontend
View.js
Was ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschl?gt, und wie l?sst sich das Problem l?sen?
Was ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschl?gt, und wie l?sst sich das Problem l?sen?
May 12, 2023 pm 01:28 PM
vue3 Ref-Bindungsdom- oder Komponentenfehleranalyse
Szenenbeschreibung
in vue3 Es ist Wird h?ufig verwendet, um ref zum Binden von Komponenten oder Dom-Elementen zu verwenden. Oft wird ref eindeutig zum Binden verwandter Komponenten verwendet, aber die Ref-Bindung schl?gt h?ufig fehl. ref綁定組件或者dom元素的情況，很多時候，明明使用ref綁定了相關組件，但是經(jīng)常ref綁定失敗的情況。
ref綁定失敗情況舉例
ref綁定失敗的絕大多數(shù)情況是，在ref和組件綁定的時候，該組件還未渲染，所以綁定失敗。
或者組件剛開始未渲染，ref未綁定，當組件開始渲染，ref也開始綁定，但是ref和組件并未綁定完成，這個時候使用組件相關的方法就會出現(xiàn)問題。
ref綁定的組件使用了
v-if,或者他的父組件使用了v-if導致頁面開始渲染的時候，這些組件并沒有渲染，所以綁定失敗。在
element-plus中有很多dialog彈窗等組件，這些組件開始是隱藏的，只有用戶點擊了按鈕才展示，所以很多時候是在用戶點擊按鈕的時候，ref才開始和組件綁定，這個時候綁定還未完成，我們通過ref的變量使用組件的方法，就會出現(xiàn)Uncaught TypeError: Cannot read properties of null (reading 'setCheckedNodes')的錯誤
解決方案
使用vue3的nextTickBeispiele für Ref-Bindungsfehler
v-if, oder ihre übergeordnete Komponente verwendet v-ifWenn die Wenn die Seite mit dem Rendern beginnt, werden diese Komponenten nicht gerendert, sodass die Bindung fehlschl?gt. Es gibt viele
Dialogfensterinelement-plus. Diese Komponenten sind ausgeblendet Zuerst wird es nur angezeigt, wenn der Benutzer auf die Schaltfl?che klickt. Wenn der Benutzer auf die Schaltfl?che klickt, wird die Bindung zu diesem Zeitpunkt noch nicht abgeschlossen Variable, ein nicht erfasster Typfehler: Eigenschaften von Null k?nnen nicht gelesen werden (lesen von ?setCheckedNodes“). Fehler
![Was ist der Grund für das Scheitern der Ref-Bindung an DOM oder Komponente in vue3 und wie l?sst sich das Problem beheben?“ />#????##???? #L?sung#????##????#Verwendung Die <code>nextTick</code>-Methode von vue3 erm?glicht die Ausführung der Logik zum Aufrufen der Ref-Komponentenmethode in der n?chsten Zeitscheibe. (#????#Empfohlen#????#) #????#<pre class='brush:php;toolbar:false;'>function addFilterPropertyRule(row) {
let ruleParamObj = JSON.parse(row.hardwareParam)
if (ruleParamObj) {
makePropertityTree(ruleParamObj, treeData)
}
addOrEditRuleVisible.value = true
currentRuleItem = row
if (row.ruleJson) {
nextTick(() => {
treeRef.value.setCheckedNodes(JSON.parse(row.ruleJson), false)
})
}
}</pre>#????#Verwenden Sie einen Verz?gerungstimer, damit die Logik des Aufrufs der Ref-Komponentenmethode eine Weile warten kann, bevor sie ausgeführt wird. (Nicht empfohlen) #????##????#vue3 kombinierte APIs v-for und ref-Bindung DOM#????##????#Es gibt keine Sonderbehandlung für kombinierte API-Vorlagenreferenzen, wenn sie intern in v-for verwendet werden. Eine benutzerdefinierte Verarbeitung von Bindungsfunktionen ist erforderlich. #????#<pre class='brush:php;toolbar:false;'><template>
<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// 確保在每次更新之前重置ref
onBeforeUpdate(() => {
divs.value = []
})
return {
list,
divs
}
}
}
</script></pre>#????##????##????##????#Ref#????##????##????##????#<pre class='brush:php;toolbar:false;'><template>
<div ref="root">This is a root element</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const root = ref(null)
onMounted(() => {
// DOM 元素將在初始渲染后分配給 ref
console.log(root.value) // <div>This is a root element</div>
})
return {
root
}
}
}
</script></pre>](https://img.php.%20cn/upload/article/000%20/000/164/168386928814489.png)
Das obige ist der detaillierte Inhalt vonWas ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschl?gt, und wie l?sst sich das Problem l?sen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So aktualisieren Sie einen Teilinhalt der Seite in Vue3
May 26, 2023 pm 05:31 PM
Um eine teilweise Aktualisierung der Seite zu erreichen, müssen wir nur das erneute Rendern der lokalen Komponente (dom) implementieren. In Vue l?sst sich dieser Effekt am einfachsten mit der v-if-Direktive erzielen. In Vue2 k?nnen wir zus?tzlich zur Verwendung der v-if-Anweisung zum erneuten Rendern des lokalen Doms auch eine neue leere Komponente erstellen. Wenn wir die lokale Seite aktualisieren müssen, springen wir zu dieser leeren Komponentenseite und springen dann wieder hinein der beforeRouteEnter-Schutz in der leeren Komponente. Wie in der Abbildung unten gezeigt, wie man in Vue3.X auf die Schaltfl?che ?Aktualisieren“ klickt, um das DOM im roten Feld neu zu laden und den entsprechenden Ladestatus anzuzeigen. Da der Guard in der Komponente in der scriptsetup-Syntax in Vue3.X nur o hat
vue3+vite: So beheben Sie den Fehler bei der Verwendung von require zum dynamischen Importieren von Bildern in src
May 21, 2023 pm 03:16 PM
vue3+vite:src verwendet ?require“, um Bilder dynamisch zu importieren, und vue3+vite importiert dynamisch mehrere Bilder. Wenn Sie ?requireisnotdefined“ verwenden, wird eine Fehlermeldung angezeigt like vue2 like imgUrl:require(' .../assets/test.png') wird importiert, da Typescript Require nicht unterstützt, daher wird Import verwendet. So l?sen Sie das Problem: Verwenden Sieawaitimport
So w?hlen Sie einen Avatar aus und schneiden ihn in Vue3 zu
May 29, 2023 am 10:22 AM
Der letzte Effekt besteht darin, die VueCropper-Komponente ?garnaddvue-cropper@next“ zu installieren. Wenn es sich um Vue3 handelt oder Sie andere Methoden als Referenz verwenden m?chten, besuchen Sie bitte die offizielle npm-Adresse. Es ist auch sehr einfach, es in einer Komponente zu referenzieren und zu verwenden. Sie müssen nur die entsprechende Komponente und ihre Stildatei einführen. Ich verweise hier nicht global, sondern nur auf import{userInfoByRequest}from'../js/api ' in meiner Komponentendatei. import{VueCropper}from'vue-cropper&
So verwenden Sie vue3+ts+axios+pinia, um eine sinnlose Aktualisierung zu erreichen
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia realisiert sinnlose Aktualisierung 1. Laden Sie zuerst aiXos und pinianpmipinia im Projekt herunter--savenpminstallaxios--save2. AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
So verwenden Sie wiederverwendbare Vue3-Komponenten
May 20, 2023 pm 07:25 PM
Vorwort Ob Vue oder React: Wenn wir auf mehrere wiederholte Codes sto?en, werden wir darüber nachdenken, wie wir diese Codes wiederverwenden k?nnen, anstatt eine Datei mit einer Reihe redundanter Codes zu füllen. Tats?chlich k?nnen sowohl Vue als auch React eine Wiederverwendung durch Extrahieren von Komponenten erreichen. Wenn Sie jedoch auf einige kleine Codefragmente sto?en und keine andere Datei extrahieren m?chten, kann React im Vergleich dazu verwendet werden Deklarieren Sie das entsprechende Widget in der Datei , oder implementieren Sie es über die Renderfunktion, wie zum Beispiel: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
So verwenden Sie defineCustomElement zum Definieren von Komponenten in Vue3
May 28, 2023 am 11:29 AM
Verwenden von Vue zum Erstellen benutzerdefinierter Elemente. WebComponents ist ein Sammelname für eine Reihe webnativer APIs, die es Entwicklern erm?glichen, wiederverwendbare benutzerdefinierte Elemente (Customelements) zu erstellen. Der Hauptvorteil von benutzerdefinierten Elementen besteht darin, dass sie mit jedem Framework verwendet werden k?nnen, auch ohne Framework. Sie sind ideal, wenn Sie Endbenutzer ansprechen, die m?glicherweise einen anderen Front-End-Technologie-Stack verwenden, oder wenn Sie die endgültige Anwendung von den Implementierungsdetails der verwendeten Komponenten entkoppeln m?chten. Vue und WebComponents sind komplement?re Technologien und Vue bietet hervorragende Unterstützung für die Verwendung und Erstellung benutzerdefinierter Elemente. Sie k?nnen benutzerdefinierte Elemente in bestehende Vue-Anwendungen integrieren oder Vue zum Erstellen verwenden
Wie werden Axios-Anfragen in vue3 gekapselt und in Komponenten verwendet?
May 21, 2023 am 10:49 AM
1. Erstellen Sie einen Ordner zum Speichern der gekapselten js. 2. Der Kapselungscode lautet wie folgt, um Get- und Post-Anfragen zu kapseln Sie müssen sich selbst konfigurieren: ?ndern Sie Ihre Anforderungsadresse, ob der TokenKey ein Token ist, und ?ndern Sie ihn in den von Ihnen gespeicherten lokalen Tokennamen. Sie k?nnen die Kommentare im Code lesen, was leicht zu verstehen ist. /**axios-Kapselung*Anforderungsabfangen, entsprechendes Abfangen und einheitliche Fehlerverarbeitung*/importaxiosfrom'axios';importQSfrom'qs'
So implementieren Sie den automatischen Import mit Vue3 und Element Plus
May 22, 2023 pm 04:58 PM
1 Einführung 1.1 Zweck ElementPlus verwendet die On-Demand-Einführung, um die Gr??e der gepackten Datei erheblich zu reduzieren. 1.2 Der Endeffekt besteht darin, die Datei ?components.d.ts“ automatisch zu generieren und in die Datei einzufügen. d.ts-Datei und fügen Sie sie in die Datei ein. ElementPlusAPI2 Vorbereitung Installieren Sie ElementPlus#W?hlen Sie einen Paketmanager, der Ihnen gef?llt#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3 Drücken Sie
