Cas d'utilisation complet de la communication avec les composants Vue-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-16 09:19:01

original

1232 Les gens l'ont consulté

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(){
})

Copier après la connexion

Étape 3 : Événement déclencheur

bus.$emit('addEvent',123)

Copier après la connexion

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>

Copier après la connexion

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!