Maison > Article > interface Web > Cas d'utilisation complet de la communication avec les composants Vue

Cas d'utilisation complet de la communication avec les composants Vue

php中世界最好的语言original: 2018-04-16 09:19:011203parcourir

Cette fois, je vais vous présenter un cas d'utilisation de la communication de composants complets avec vue. Quelles sont les précautions lors de l'utilisation de la communication de composants complets avec vue.

L'exemple de cet article partage la communication entre les composants complets de Vue pour votre référence. Le contenu spécifique est le suivant

. Implémentez une ToDoList.

①Terminer la création et l'utilisation de tous les composants

②ajouter

Lorsque vous cliquez sur le bouton Ajouter, le contenu saisi par l'utilisateur (todoinput) est affiché dans (todolist)

Code principal : Communication entre composants frères
Étape 1 : var bus = new Vue()
Étape 2 : Dans le composant prêt à recevoir des données

bus.$on('addEvent',function(){
})

Étape 3 : Événement déclencheur

bus.$emit('addEvent',123)

Rendre les éléments du tableau dans todolist dans chaque balise span de todoitem. (Composante communication père-enfant)

③supprimer

Lorsque l'on clique sur le bouton Supprimer dans le todoitem, le todoitem sera supprimé, car le nombre de todoitem dépend du tableau

dans la todolist Communication entre le composant enfant et le composant parent :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-resource.js"></script>
</head>
<body>
<p id="container">
  <p>{{msg}}</p>
  <todobox></todobox>
</p>
<script>
  <!--兄弟间通信-->
  var bus = new Vue();
//  input组件
  Vue.component("todoinput",{
//    保存用户输入的数据
    data:function(){
      return{
        userInput:""
      }
    },
    methods:{
      sendInput:function(){
//        触发自定义事件，将this.userInput这个传递到todolist
        bus.$emit("addEvent",this.userInput);
        this.userInput = "";
      }
    },
    template: `
      <p>
        <h1>待做事项</h1>
        <input type="text" placeholder="健身" v-model="userInput"/>
        <button @click="sendInput">Add</button>
      </p>
       `
  })
//  列表组件
  Vue.component("todolist",{
//    保存传递来的用户输入的数据
    data:function(){
      return{
        inputList:[]
      }
    },
    beforeMount:function(){
//      触发绑定
//      msg就是事件触发后传递过来的数据
      //var that = this;
      bus.$on("addEvent",(msg)=>{
//        保存到数组inputList中
        this.inputList.push (msg) ;
      })
    },
    template: `
    <p>
      <ul>
        <todoitem v-bind:content="tmp" v-for="(tmp,index) in inputList" v-bind:key="index" v-bind:myIndex="index"></todoitem>
      </ul>
    </p>
       `
//    出现警告，加下标，提高列表渲染
  })
//  item组件
  Vue.component("todoitem",{
//    props子组件获取父组件的数据，将todolist中的内容以及内容的下标获取
    props:["content","myIndex"],
    methods:{
//      通过下标删除
      deleteList:function(){
        this.$parent.inputList.splice(this.myIndex,1);
      }
    },
    template: `
    <p>
      <li>
        <button @click="deleteList">delete</button>
         <span>{{content}}</span>
      </li>
    </p>
       `
  })
//根组件
  Vue.component("todobox",{
    template:`
      <p>
        <todoinput></todoinput>
        <todolist></todolist>
      </p>
    `
  })
  new Vue({
    el: "#container",
    data: {
      msg: "Hello Vue"
    }
  })
</script>
</body>
</html>

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 !

Lecture recommandée :

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!

php var delete 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode d'implémentation du SPA imbriqué de routage de vueArticle suivant：Méthode d'implémentation du SPA imbriqué de routage de vue

Articles Liés

Voir plus