zoukankan      html  css  js  c++  java
  • vue--综合组件间的通信

    二、综合组件之间的通信

    实现一个ToDoList。

    ①完成所有的组件的创建和使用

    ②add
    点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist)

    核心代码:兄弟组件间通信
    步骤1:var bus = new Vue()
    步骤2:在准备接受数据的组件
    bus.$on('addEvent',function(){

    })
    步骤3:触发事件
    bus.$emit('addEvent',123)


    将todolist中数组的元素 渲染在todoitem的每一个span标签。(父子组件通信)

    ③delete

    在todoitem中点击delete按钮时,将该todoitem删除,由于todoitem的数量 取决于 todolist中数组

    子组件 和 父组件通信、

    <!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>
    <div id="container">
        <p>{{msg}}</p>
        <todobox></todobox>
    </div>
    <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: `
                <div>
                    <h1>待做事项</h1>
                    <input type="text" placeholder="健身" v-model="userInput"/>
                    <button @click="sendInput">Add</button>
                </div>
    
                 `
        })
    //    列表组件
        Vue.component("todolist",{
    //        保存传递来的用户输入的数据
            data:function(){
                return{
                    inputList:[]
                }
            },
            beforeMount:function(){
    //            触发绑定
    //            msg就是事件触发后传递过来的数据
                //var that = this;
                bus.$on("addEvent",(msg)=>{
    //                保存到数组inputList中
                    this.inputList.push (msg) ;
                })
            },
            template: `
            <div>
                <ul>
                   <todoitem v-bind:content="tmp" v-for="(tmp,index) in inputList" v-bind:key="index" v-bind:myIndex="index"></todoitem>
                </ul>
            </div>
                 `
    //        出现警告,加下标,提高列表渲染
        })
    //    item组件
        Vue.component("todoitem",{
    //        props子组件获取父组件的数据,将todolist中的内容以及内容的下标获取
            props:["content","myIndex"],
            methods:{
    //            通过下标删除
                deleteList:function(){
                    this.$parent.inputList.splice(this.myIndex,1);
                }
            },
            template: `
            <div>
                <li>
                    <button @click="deleteList">delete</button>
                     <span>{{content}}</span>
                </li>
            </div>
                 `
        })
    //根组件
        Vue.component("todobox",{
            template:`
                <div>
                    <todoinput></todoinput>
                    <todolist></todolist>
                </div>
            `
        })
        new Vue({
            el: "#container",
            data: {
                msg: "Hello Vue"
            }
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    leetcode701. Insert into a Binary Search Tree
    leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树 、222. Count Complete Tree Nodes
    leetcode 110. Balanced Binary Tree
    leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree
    二叉树
    leetcode 124. Binary Tree Maximum Path Sum 、543. Diameter of Binary Tree(直径)
    5. Longest Palindromic Substring
    128. Longest Consecutive Sequence
    Mac OS下Android Studio的Java not found问题,androidfound
    安卓 AsyncHttpClient
  • 原文地址:https://www.cnblogs.com/wangruifang/p/7779419.html
Copyright © 2011-2022 走看看