interface Web
js tutoriel
Comment utiliser le composant parent-enfant dans Vue pour communiquer avec le composant todolist
Comment utiliser le composant parent-enfant dans Vue pour communiquer avec le composant todolist
Cette fois, je vais vous montrer comment utiliser le composant parent-enfant dans Vue pour communiquer avec le composant todolist. Quelles sont les précautions pour utiliser le composant parent-enfant dans Vue pour communiquer avec le composant todolist. composant Voici un cas pratique, jetons un oeil.
1. Développement de la fonction Todolist
<p id="root">
<p>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</p>
<ul>
<li v-for="(item, index ) of list" :key="index">{{item}} </li>
</ul>
</p>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>2. Diviser les composants de la liste todolist
Définir les composants et communiquer entre les composants
1. 🎜>
<p id="root">
<p>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</p>
<ul>
<todo-item></todo-item>
</ul>
</p>
<script>
Vue.component('todo-item',{
template:'<li>item</li>'
})
...doivent être enregistrés, sinon une erreur sera signalée :
vue.js:597. [Vue warn] : Élément personnalisé inconnu :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<p id="root">
<p>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</p>
<ul>
<todo-item></todo-item>
</ul>
</p>
<script>
//全局组件
// Vue.component('todo-item',{
// template:'<li>item</li>'
// })
var TodoItem={
template:'<li>item</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>transmet la valeur Le composant parent transmet la valeur au composant enfant sous forme d'attributs.
<p id="root">
<p>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</p>
<ul>
<todo-item
v-for="(item ,index) of list"
:key="index"
:content="item"
></todo-item>
</ul>
</p>
<script>
Vue.component('todo-item',{
props: ['content'], //接收从外部传递进来的content属性
template:'<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>3. La relation entre les composants et les instances
nouvelle instance Vue()Vue.component est un composant
Chaque composant Vue est une instance de Vue.
Tout projet vue est composé de milliers d'instances vue.
Chaque instance de vue est un composant, et chaque composant est également une instance de vue.
4. Implémentez la fonction delete de todolist Le composant enfant informe le composant parent via la publication-abonnement mode.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !<p id="root">
<p>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</p>
<ul>
<todo-item
v-for="(item ,index) of list"
:key="index"
:content="item"
:index="index"
@delete='handleDelete'
></todo-item>
</ul>
</p>
<script>
Vue.component('todo-item',{
props: ['content','index'], //接收从外部传递进来的content属性
template:'<li @click="handleDeleteItem">{{content}}</li>',
methods:{
handleDeleteItem:function(){
this.$emit('delete',this.index);
}
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
},
handleDelete:function(index){
this.list.splice(index,1);Lecture recommandée :
Comment créer un jeu de tic-tac-toe avec JSComment utiliser vue2. 0 pour implémenter la garde de navigationCe 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)
Comment installer le composant DirectPlay de l'ancienne version de Windows 10
Dec 28, 2023 pm 03:43 PM
De nombreux utilisateurs rencontrent toujours des problèmes lorsqu'ils jouent à certains jeux sur Win10, tels que le gel de l'écran et les écrans flous. À l'heure actuelle, nous pouvons résoudre le problème en activant la fonction de lecture directe, et la méthode de fonctionnement de la fonction est également très simple. Comment installer Directplay, l'ancien composant de Win10 1. Entrez "Panneau de configuration" dans la zone de recherche et ouvrez-le 2. Sélectionnez de grandes icônes comme méthode d'affichage 3. Recherchez "Programmes et fonctionnalités" 4. Cliquez sur la gauche pour activer ou désactiver les fonctions Win 5. Sélectionnez l'ancienne version ici Cochez simplement la case
Comment implémenter le composant de calendrier à l'aide de Vue ?
Jun 25, 2023 pm 01:28 PM
Vue est un framework front-end très populaire. Il fournit de nombreux outils et fonctions, tels que la création de composants, la liaison de données, la gestion d'événements, etc., qui peuvent aider les développeurs à créer des applications Web efficaces, flexibles et faciles à entretenir. Dans cet article, je vais vous présenter comment implémenter un composant de calendrier à l'aide de Vue. 1. Analyse des exigences Tout d'abord, nous devons analyser les exigences de ce composant de calendrier. Un calendrier de base doit avoir les fonctions suivantes : afficher la page du calendrier du mois en cours ; prendre en charge le passage au mois précédent ou au mois suivant en cliquant sur un certain jour ;
Bases du développement VUE3 : utilisation d'extensions pour hériter des composants
Jun 16, 2023 am 08:58 AM
Vue est actuellement l'un des frameworks frontaux les plus populaires, et VUE3 est la dernière version du framework Vue. Par rapport à VUE2, VUE3 a des performances plus élevées et une meilleure expérience de développement, et est devenu le premier choix de nombreux développeurs. Dans VUE3, utiliser extends pour hériter de composants est une méthode de développement très pratique. Cet article explique comment utiliser extends pour hériter de composants. Qu'est-ce qui s'étend ? Dans Vue, extends est un attribut très pratique, qui peut être utilisé pour que les composants enfants héritent de leurs parents.
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.
Comment ouvrir les paramètres de l'ancienne version des composants Win10
Dec 22, 2023 am 08:45 AM
Les composants de l'ancienne version de Win10 doivent être activés par les utilisateurs eux-mêmes dans les paramètres, car de nombreux composants sont généralement fermés par défaut. Nous devons d'abord entrer les paramètres. L'opération est très simple. Suivez simplement les étapes ci-dessous. composants de version ? Ouvrir 1. Cliquez sur Démarrer, puis cliquez sur « Système Win » 2. Cliquez pour accéder au Panneau de configuration 3. Cliquez ensuite sur le programme ci-dessous 4. Cliquez sur « Activer ou désactiver les fonctions Win » 5. Ici, vous pouvez choisir ce que vous voulez. ouvrir
Parlons de la façon dont Vue restitue dynamiquement les composants via JSX
Dec 05, 2022 pm 06:52 PM
Comment Vue restitue-t-il dynamiquement les composants via JSX ? L'article suivant vous présentera comment Vue peut restituer efficacement et dynamiquement des composants via JSX. J'espère qu'il vous sera utile !
Pratique des composants Vue : développement de composants de pagination
Nov 24, 2023 am 08:56 AM
Pratique des composants Vue : Introduction au développement de composants de pagination Dans les applications Web, la fonction de pagination est un composant essentiel. Un bon composant de pagination doit être simple et clair dans sa présentation, riche en fonctions et facile à intégrer et à utiliser. Dans cet article, nous présenterons comment utiliser le framework Vue.js pour développer un composant de pagination hautement personnalisable. Nous expliquerons en détail comment développer à l'aide des composants Vue à travers des exemples de code. Pile technologique Vue.js2.xJavaScript (ES6) Environnement de développement HTML5 et CSS3
Partage de plug-in VSCode : un plug-in pour un aperçu en temps réel des composants Vue/React
Mar 17, 2022 pm 08:07 PM
Lors du développement de composants Vue/React dans VSCode, comment prévisualiser les composants en temps réel ? Cet article partagera avec vous un plug-in pour un aperçu en temps réel des composants Vue/React dans VSCode. J'espère qu'il vous sera utile !
