Home > Article > Web Front-end > vue comprehensive component communication use case

vue comprehensive component communication use case

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

This time I will bring you a use case of vue comprehensive component communication. What are the precautions when using vue comprehensive component communication. The following is a practical case, let's take a look.

The example in this article shares the communication between vue comprehensive components for your reference. The specific content is as follows

Implement a ToDoList.

①Complete the creation and use of all components

②add

When the add button is clicked, the content entered by the user (todoinput) is displayed in (todolist)

Core code: Communication between sibling components
Step 1: var bus = new Vue()
Step 2: In the component that is ready to receive data

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

Step 3: Trigger event

bus.$emit('addEvent',123)

Render the elements of array in todolist in each span tag of todoitem. (Parent-child component communication)

③delete

When you click the delete button in a todoitem, the todoitem will be deleted because the number of todoitem depends on the array

in the todolist. Communication between child component and parent component:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

vue comprehensive component communication use case

Related articles