二、综合组件之间的通信

实现一个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>

vue--综合组件间的通信的更多相关文章

  1. Vue 父子组件间的通信

    前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...

  2. Vue父子组件间的通信

    父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div> <div style="background:#344 ...

  3. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  5. vuejs单一事件管理组件间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue.js组件之间的通信

    导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...

  7. Vue.js组件间通信方式总结

    平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...

  8. Vue2不使用Vuex如何实现兄弟组件间的通信

    在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...

  9. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

随机推荐

  1. C#使用反射机制获取类信息

    1．用反射动态创建类实例,并调用其公有成员函数. //新建一个类库项目,增加一个GetSum方法. using System;   namespace ClassLibrary1 {    publi ...

  2. DP | Luogu P1466 集合 Subset Sums

    题面:P1466 集合 Subset Sums 题解: dpsum=N*(N+1)/2;模型转化为求选若干个数,填满sum/2的空间的方案数,就是背包啦显然如果sum%2!=0是没有答案的,就特判掉F ...

  3. Java并发编程实战 第11章 性能与可伸缩性

    关于性能 性能的衡量标准有很多,如: 服务时间,等待时间用来衡量程序的"运行速度""多快". 吞吐量,生产量用于衡量程序的"处理能力",能够 ...

  4. springboot项目作为其他项目子项目

    <?xml version="1.0"?> <project xsi:schemaLocation="http://maven.apache.org/P ...

  5. vue-router中$route 和 $router

    1.1 $route 表示(当前路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录).路由信息对象:即$ro ...

  6. 什么是工作流java Activity

    见:http://www.it165.net/pro/html/201504/37443.html 一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假 ...

  7. net core 接受post值

    public static string GetPostParams(HttpContext context) { string param = string.Empty; if (context.R ...

  8. 论文阅读：Stateless Network Functions: Breaking the Tight Coupling of State and Processing

    摘要: 无状态网络功能是一个新的网络功能虚拟化架构,解耦了现有的网络功能设计到无状态处理组件以及数据存储层,在打破紧密耦合的同时,实现了更具可伸缩性和可恢复性的网络功能基础设施.无状态NF处理实例是围 ...

  9. KafKa集群安装详细步骤

    最近在使用Spring Cloud进行分布式微服务搭建,顺便对集成KafKa的方案做了一些总结,今天详细介绍一下KafKa集群安装过程: 1. 在根目录创建kafka文件夹(service1.serv ...

  10. LBS 基于位置的服务

    LBS (Location Based Services)基于位置的服务 基于位置的服务,它是通过电信移动运营商的无线电通讯网络(如GSM网.CDMA网)或外部定位方式(如GPS)获取移动终端用户的位 ...