Maison >interface Web >js tutoriel >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>' }) ...2. Les composants locaux
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>3. Le composant
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!