Comment utiliser le composant parent-enfant dans Vue pour communiquer avec le composant todolist-js tutoriel-php.cn

Comment utiliser le composant parent-enfant dans Vue pour communiquer avec le composant todolist

php中世界最好的语言

Libérer： 2018-05-28 14:48:51

original

2093 Les gens l'ont consulté

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>

Copier après la connexion

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>'
 })
...

Copier après la connexion

2. Les composants locaux

doivent être enregistrés, sinon une erreur sera signalée :

vue.js:597. [Vue warn] : Élément personnalisé inconnu : - avez-vous enregistré le composant correctement ? Pour les composants récursifs, assurez-vous de fournir l'option "name".

<!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>

Copier après la connexion

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>

Copier après la connexion

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=&#39;handleDelete&#39;
   ></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);

Copier après la connexion

Lecture recommandée :

Comment créer un jeu de tic-tac-toe avec JS

Comment utiliser vue2. 0 pour implémenter la garde de navigation

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!