Heim > Artikel > Web-Frontend > Welche Methoden gibt es, um Fallstricke beim Übergeben von Werten zwischen Vue3-Komponenten zu vermeiden?
Welche Methoden gibt es, um Fallstricke beim Übergeben von Werten zwischen Vue3-Komponenten zu vermeiden?
- WBOYnach vorne
- 2023-05-15 08:34:051130Durchsuche
Instanz füllt Gruben
Grube eins
1. Entdecken der Grube
Wir verwenden eine Gegenkomponente, um diese Grube zu demonstrieren. Wenn wir mit dem von der übergeordneten Komponente übergebenen Wert operieren möchten, finden wir die Operation ist ungültig. Schauen wir uns zuerst den Code an:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num:0
}
},
template: `
<div>
<counter :count = "num"/>
</div>
`
});
// 定义一个test组件
app.component('counter',{
props: ['count'],
template: `<div @click="count+=1">{{count}}</div>`
});
const vm = app.mount('#root');
</script>
</html>Im obigen Code definieren wir eine Zählerkomponente, um einen Zählwert von der übergeordneten Komponente zu erhalten. Wenn wir auf den angezeigten Wert klicken, fügen wir einen hinzu. Wenn wir den Code zu diesem Zeitpunkt ausführen, werden wir feststellen, dass unser Wert den Inkrementierungsvorgang nicht abschließt, sondern meldet, dass der von der übergeordneten Komponente übergebene Wert schreibgeschützt ist:
2 Den Lückenmoment füllen
Was ist, wenn wir wollen? Was soll ich tun, um diese Plus-Eins-Funktion abzuschließen? Die Antwort ist, dass wir den von der übergeordneten Komponente übergebenen Wert kopieren und mit unserem eigenen Wert operieren:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num:0
}
},
template: `
<div>
<counter :count = "num"/>
</div>
`
});
// 定义一个test组件
app.component('counter',{
props: ['count'],
data(){
return{
mCount:this.count
}
},
template: `<div @click="mCount+=1">{{mCount}}</div>`
});
const vm = app.mount('#root');
</script>
</html>Wenn wir den Code erneut ausführen, werden wir feststellen, dass wir einen hinzufügen können:
Pit 2:
1 . Das Sinkhole gefunden
Wenn wir ein Attribut mit einem langen Wortnamen definieren und es mit dem „-“-Trennzeichen verbinden, kann die Unterkomponente nicht den richtigen Wert empfangen und zeigt NaN an. Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content:"hello world"
}
},
template: `
<div>
<test :content-helloworld = "content"/>
</div>
`
});
// 定义一个test组件
app.component('test',{
props: ['content-helloworld'],
template: `<div>{{content-helloworld}}</div>`
});
const vm = app.mount('#root');
</script>
</html>Im obigen Code verwenden wir das Attribut content-helloworld, um Werte zwischen der übergeordneten Komponente und der untergeordneten Komponente zu übergeben erfolgreich sein, aber die Anzeige Das Ergebnis ist falschcontent-helloworld这个属性在父组件和子组件之间传值，按照我们的理解，应该是能传递成功的，但是显示的结果却不正确
上面到坑也是VUE中的单向数据流的概念，即子组件可以使用父组件传递过来的数据，但是不能修改父组件传递过来的数据
2.填坑时刻
当我们定义的属性值中有用“-”分隔符分隔时，我们在接收值的时候，需要将属性名改成驼峰命名的方式，如上面的例子中父组件使用content-helloworld传递值到子组件，那么子组件接收到时候应该将其改成驼峰命名方式：使用contentHelloworld
Die oben erwähnte Gefahr ist auch das Konzept des einseitigen Datenflusses in VUE, das heißt, untergeordnete Komponenten können die von der übergeordneten Komponente übergebenen Daten verwenden, die übergebenen Daten jedoch nicht ändern durch die übergeordnete Komponente
2. Der Moment des Ausfüllens der Grube
content-helloworld. Übergeben Sie den Wert an die Unterkomponente. Die Unterkomponente sollte ihn dann beim Empfang in Kamel-Schreibweise umwandeln: Verwenden Sie contentHelloworld um 🎜<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content:"hello world"
}
},
template: `
<div>
<test :content-helloworld = "content"/>
</div>
`
});
// 定义一个test组件
app.component('test',{
props: ['contentHelloworld'],
template: `<div>{{contentHelloworld}}</div>`
});
const vm = app.mount('#root');
</script>
</html>🎜 zu erhalten, damit der Wert korrekt angezeigt werden kann🎜🎜🎜🎜Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um Fallstricke beim Übergeben von Werten zwischen Vue3-Komponenten zu vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Über Vue mit Validator: VeeValidate3
- Was sind die Unterschiede zwischen berechnet und Methode in Vue?
- Einführung in die Methode zum Deaktivieren der Eslint-Überprüfung im Vue-Projekt
- Einführung in verschiedene Methoden zum Definieren von Komponentenvorlagen in Vue.js
- Vier Orte zur Implementierung von AJAX in Vue-Anwendungen