interface Web
js tutoriel
Explication détaillée de la communication parent-enfant du composant Vue (1)
Explication détaillée de la communication parent-enfant du composant Vue (1)
Cet article présente principalement l'explication détaillée de la communication parent-enfant du composant Vue et l'implémentation de la fenêtre de connexion, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.
1. Communication entre les composants (composant parent --> composant enfant)
Étapes :
①Composant parent Pass la valeur lors de l'appel du composant enfant
<child-component myValue="123"> </child-component>
② Récupère la valeur transmise par le composant parent dans le composant enfant
Vue.component('child-component',{
props:['myValue'],
template:''
})Code 1 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>父传子</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</p>
<script>
// 在vue中一切都是组件
//父传子
Vue.component("parent-component",{
data:function(){
return {
gift:"传家宝"
}
},
template:`
<p>
<h1>这是父组件</h1>
<hr>
<child-component v-bind:myValue="gift"></child-component>
</p>
`
})
Vue.component("child-component",{
props:["myValue"],
template:`
<p>
<h1>这是子组件</h1>
<p>{{"父传递的值："+myValue}}</p>
</p>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>myValue est le nom de l'attribut, ils doivent être les mêmes... utilisez v dans data -bind : Ou :
props est un attribut de propriété, qui est un tableau
Code 2 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>父子之间通信练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<my-login></my-login>
</p>
<script>
/*
登录窗口
创建4个组件，分别是my-label my-input my-button my-login(复合组件)
*/
Vue.component("my-label",{
props:["myLabel"],
template:`
<p>
<label>{{myLabel}}</label>
</p>
`
})
Vue.component("my-input",{
template:`
<p>
<input type="text"/>
</p>
`
})
Vue.component("my-button",{
props:["myButton"],
template:`
<p>
<button>{{myButton}}</button>
</p>
`
})
//复合组件
Vue.component("my-login",{
data:function(){
return {
uname:"用户名",
upwd:"密码",
login:"登录",
register:"注册"
}
},
template:`
<p>
<my-label v-bind:myLabel="uname"></my-label>
<my-input></my-input>
<my-label v-bind:myLabel="upwd"></my-label>
<my-input></my-input>
<my-button v-bind:myButton="login"></my-button>
<my-button v-bind:myButton="register"></my-button>
</p>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>Code 3 :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<p id="container">
<my-login></my-login>
</p>
<script>
Vue.component('my-label',{
props:['labelName'],
template:'<label>{{labelName}}</label>'
})
Vue.component('my-input',{
props:['tips'],
template:'<input type="text" :placeholder="tips"/>'
})
Vue.component('my-button',{
props:['btnName'],
template:'<button>{{btnName}}</button>'
})
Vue.component('my-login',{
template:`
<form>
<my-label labelName="用户名"></my-label>
<my-input tips="请输入用户名"></my-input>
<br/>
<my-label labelName="密码"></my-label>
<my-input tips="请输入密码"></my-input>
<br/>
<my-button btnName="登录"></my-button>
<my-button btnName="注册"></my-button>
</form>
`
})
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>Pour obtenir les données dans data, vous avez besoin de v-bind, sinon ce n'est pas nécessaire.
Recommandations associées :
Introduction aux événements de stockage, méthodes de communication entre les pages js
Communication des composants Vue.js Analyse détaillée de plusieurs postures
Une brève introduction aux méthodes de communication entre les composants React
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Nouvelle génération de technologie haut débit par fibre optique - 50G PON
Apr 20, 2024 pm 09:22 PM
Dans l'article précédent (lien), Xiao Zaojun a présenté l'historique du développement de la technologie haut débit, du RNIS, du xDSL au 10GPON. Aujourd'hui, parlons de la nouvelle génération à venir de technologie haut débit par fibre optique-50GPON. █F5G et F5G-A Avant de présenter 50GPON, parlons d'abord de F5G et F5G-A. En février 2020, l'ETSI (European Telecommunications Standards Institute) a promu un système technologique de réseau de communication fixe basé sur 10GPON+FTTR, Wi-Fi6, transmission/agrégation optique 200G, OXC et d'autres technologies, et l'a nommé F5G. technologie de communication en réseau (The5thGenerationFixednetworks). F5G est un réseau fixe
Explication détaillée de l'obtention des droits d'administrateur dans Win11
Mar 08, 2024 pm 03:06 PM
Le système d'exploitation Windows est l'un des systèmes d'exploitation les plus populaires au monde et sa nouvelle version Win11 a beaucoup attiré l'attention. Dans le système Win11, l'obtention des droits d'administrateur est une opération importante. Les droits d'administrateur permettent aux utilisateurs d'effectuer davantage d'opérations et de paramètres sur le système. Cet article présentera en détail comment obtenir les autorisations d'administrateur dans le système Win11 et comment gérer efficacement les autorisations. Dans le système Win11, les droits d'administrateur sont divisés en deux types : administrateur local et administrateur de domaine. Un administrateur local dispose de tous les droits d'administration sur l'ordinateur local
Explication détaillée du fonctionnement de la division dans Oracle SQL
Mar 10, 2024 am 09:51 AM
Explication détaillée de l'opération de division dans OracleSQL Dans OracleSQL, l'opération de division est une opération mathématique courante et importante, utilisée pour calculer le résultat de la division de deux nombres. La division est souvent utilisée dans les requêtes de bases de données. Comprendre le fonctionnement de la division et son utilisation dans OracleSQL est donc l'une des compétences essentielles des développeurs de bases de données. Cet article discutera en détail des connaissances pertinentes sur les opérations de division dans OracleSQL et fournira des exemples de code spécifiques pour référence aux lecteurs. 1. Opération de division dans OracleSQL
L'histoire du développement des souris sans fil
Jun 12, 2024 pm 08:52 PM
Titre original : « Comment une souris sans fil devient-elle sans fil ? 》Les souris sans fil sont progressivement devenues un élément standard des ordinateurs de bureau d'aujourd'hui. Désormais, nous n'avons plus besoin de traîner de longs câbles. Mais comment fonctionne une souris sans fil ? Aujourd'hui, nous allons découvrir l'histoire du développement de la souris sans fil n°1. Saviez-vous que la souris sans fil a maintenant 40 ans ? En 1984, Logitech a développé la première souris sans fil au monde, mais cette souris sans fil utilisait l'infrarouge comme signal. On dit que le transporteur ressemble à l'image ci-dessous, mais il a ensuite échoué pour des raisons de performances. Ce n'est qu'en 1994, dix ans plus tard, que Logitech réussit enfin à développer une souris sans fil fonctionnant à 27 MHz. Cette fréquence de 27 MHz est également devenue la souris sans fil pendant longtemps.
Explication détaillée du rôle et de l'utilisation de l'opérateur modulo PHP
Mar 19, 2024 pm 04:33 PM
L'opérateur modulo (%) en PHP est utilisé pour obtenir le reste de la division de deux nombres. Dans cet article, nous discuterons en détail du rôle et de l'utilisation de l'opérateur modulo et fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre. 1. Le rôle de l'opérateur modulo En mathématiques, lorsqu'on divise un entier par un autre entier, on obtient un quotient et un reste. Par exemple, lorsque l’on divise 10 par 3, le quotient est 3 et le reste est 1. L'opérateur modulo est utilisé pour obtenir ce reste. 2. Utilisation de l'opérateur modulo En PHP, utilisez le symbole % pour représenter le module
Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes
Mar 15, 2024 pm 04:51 PM
Le comportement d'affichage par défaut des composants du framework Angular ne concerne pas les éléments au niveau du bloc. Ce choix de conception favorise l'encapsulation des styles de composants et encourage les développeurs à définir consciemment la manière dont chaque composant est affiché. En définissant explicitement l'affichage des propriétés CSS, l'affichage des composants angulaires peut être entièrement contrôlé pour obtenir la mise en page et la réactivité souhaitées.
Explication détaillée de la fonction d'appel système Linux system()
Feb 22, 2024 pm 08:21 PM
Explication détaillée de la fonction d'appel système Linux system() L'appel système est une partie très importante du système d'exploitation Linux. Il fournit un moyen d'interagir avec le noyau système. Parmi elles, la fonction system() est l’une des fonctions d’appel système couramment utilisées. Cet article présentera en détail l’utilisation de la fonction system() et fournira des exemples de code correspondants. Concepts de base des appels système Les appels système sont un moyen permettant aux programmes utilisateur d'interagir avec le noyau du système d'exploitation. Les programmes utilisateur demandent au système d'exploitation en appelant des fonctions d'appel système
Une brève histoire de la technologie Internet à large bande
Apr 16, 2024 am 09:00 AM
À l’ère numérique d’aujourd’hui, le haut débit est devenu une nécessité pour chacun d’entre nous et chaque famille. Sans cela, nous serions agités et agités. Alors, connaissez-vous les principes techniques du haut débit ? Depuis la première connexion commutée 56k "cat" jusqu'aux villes et foyers Gigabit actuels, quels types de changements notre technologie haut débit a-t-elle connu ? Dans l’article d’aujourd’hui, examinons de plus près « l’histoire du haut débit ». Avez-vous vu cette interface entre █xDSL et RNIS ? Je crois que de nombreux amis nés dans les années 70 et 80 ont dû le voir et le connaissent très bien. C'est vrai, c'était l'interface pour « accès commuté » lorsque nous sommes entrés en contact avec Internet pour la première fois. C'était il y a plus de 20 ans, lorsque Xiao Zaojun était encore à l'université. Pour surfer sur Internet, je
