Code:
p>
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<x :type="type"></x>
</div>
<script>
Vue.component('x', {
props : ['type'],
template : '<input>'
});
const x = new Vue({
el : '#app',
data : {
type : `password`,
},
})
</script>
</body>
</html>4 Réponses :
Vous devez spécifier explicitement spécifier Type ProP sur Modèle:
Vue.component('x', {
props : ['type'],
template : '<input :type="type">'
});
Essayez avec:
p>
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<x :type="type"></x>
</div>
<script>
Vue.component('x', {
props : ['type'],
template : `<input :type="type">`
});
const x = new Vue({
el : '#app',
data : {
type : `password`,
},
})
</script>
</body>
</html>Vous avez passé le type code> code> accessoire mais n'a pas marié dans le modèle. Essayez un peu le code suivant
p>
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<x :type="type"></x>
</div>
</body>
</html>
Je suis confus pourquoi je dois lier deux fois, une fois dans vue.commonent
Vous n'êtes pas contraignant deux fois. Dans x x (peut prendre en compte une application de fonction comme x ({ Type: 'Type'})). Dans x Modèle du composant Vous êtes liant
Depuis que vous avez défini type code> en tant que prop, il ne sera pas appliqué automatiquement à l'élément racine. Vous devez le lier dans votre modèle: Vue.component('x', {
props : [],
template : '<input>'
});
Est-il possible de se lier une fois en composant ou dois-je le faire en composant et élément racinaire?
Le point d'accessoires est-il permettant de transmettre certaines données à un composant puis que ce composant peut choisir de faire ce qu'il veut avec ces données, dans votre cas, vous souhaitez l'affecter à l'attribut de type sur l'élément racine. Cela dépend donc de ce que vous voulez faire. Typiquement, vous devez toujours le lier deux fois, mais dans le deuxième exemple de ma réponse, vous n'avez pas besoin de faire quoi que ce soit chez l'enfant.