Nous utilisons un composant compteur pour démontrer cette fosse Lorsque nous voulons opérer sur la valeur transmise par le composant parent, nous constatons que l'opération. n'est pas valide. Regardons-le d'abord Code :
<!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>Dans le code ci-dessus, nous définissons un composant compteur pour recevoir une valeur de comptage du composant parent Lorsque nous cliquons sur la valeur affichée, nous en ajoutons une. Lorsque nous exécutons le code à ce moment-là, nous constaterons que notre valeur ne terminera pas l'opération d'incrémentation, mais signalera que la valeur transmise par le composant parent est en lecture seule :
Et si nous voulons Que dois-je faire pour remplir cette fonction plus une ? La réponse est que nous copions la valeur transmise par le composant parent et opérons sur notre propre valeur :
<!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>Lorsque nous exécutons à nouveau le code, nous constaterons que nous pouvons en ajouter une :
Lorsque nous définissons un attribut avec un nom de mot long et le connectons avec le séparateur "-", le sous-composant ne peut pas recevoir la valeur correcte et affiche NaN. Le code est le suivant :
<!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>Dans le code ci-dessus, nous utilisons l'attribut content-helloworld pour transmettre des valeurs entre le composant parent et le composant enfant. Selon notre compréhension, le transfert devrait. réussir, mais l'affichage Le résultat est incorrectcontent-helloworld这个属性在父组件和子组件之间传值，按照我们的理解，应该是能传递成功的，但是显示的结果却不正确
上面到坑也是VUE中的单向数据流的概念，即子组件可以使用父组件传递过来的数据，但是不能修改父组件传递过来的数据
当我们定义的属性值中有用“-”分隔符分隔时，我们在接收值的时候，需要将属性名改成驼峰命名的方式，如上面的例子中父组件使用content-helloworld传递值到子组件，那么子组件接收到时候应该将其改成驼峰命名方式：使用contentHelloworld
Le piège mentionné ci-dessus est également le concept de flux de données unidirectionnel dans VUE, c'est-à-dire que les composants enfants peuvent utiliser les données transmises par le composant parent, mais ne peuvent pas modifier les données transmises. par le composant parent
2. Le moment de remplir la fosse
content-helloworld Passez la valeur au sous-composant, puis le sous-composant doit la changer en dénomination camel lors de sa réception : utilisez contentHelloworld de recevoir 🎜<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre vue2.0 et 3.0
Quels sont les cycles de vie de vue3
Utilisation de ModifierMenu
Comment définir la couleur de la police en HTML
Comment utiliser l'étiquette htmllabel
Trois caractéristiques majeures de Java
Quelle est la différence entre le framework CSS et la bibliothèque de composants
Quels sont les avantages de la base de données MongoDB
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
