Vue umfassender Anwendungsfall für Komponentenkommunikation-js-Tutorial-php.cn

Vue umfassender Anwendungsfall für Komponentenkommunikation

php中世界最好的语言

Freigeben： 2018-04-16 09:19:01

Original

1232 Leute haben es durchsucht

Dieses Mal werde ich Ihnen einen Anwendungsfall für die umfassende Komponentenkommunikation von Vue vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der umfassenden Komponentenkommunikation von Vue?

Das Beispiel in diesem Artikel teilt die Kommunikation zwischen den umfassenden Vue-Komponenten als Referenz. Der spezifische Inhalt ist wie folgt

Implementieren Sie eine ToDoList.

①Schließen Sie die Erstellung und Verwendung aller Komponenten ab

②hinzufügen

Wenn auf die Schaltfläche „Hinzufügen“ geklickt wird, wird der vom Benutzer eingegebene Inhalt (todoinput) in (todolist)

angezeigt Kerncode: Kommunikation zwischen Geschwisterkomponenten
Schritt 1: var bus = new Vue()
Schritt 2: In der Komponente bereit zum Datenempfang

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

Nach dem Login kopieren

Schritt 3: Ereignis auslösen

bus.$emit('addEvent',123)

Nach dem Login kopieren

Rendern Sie die Elemente des array in todolist in jedem Span-Tag von todoitem. (Vater-Kind-Komponentenkommunikation)

③löschen

Wenn im Todo-Element auf die Schaltfläche „Löschen“ geklickt wird, wird das Todo-Element gelöscht, da die Anzahl der Todo-Elemente vom Array

in der Todo-Liste abhängt Kommunikation zwischen untergeordneter Komponente und übergeordneter Komponente:

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonVue umfassender Anwendungsfall für Komponentenkommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!