二、综合组件之间的通信

实现一个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. linuxCentOS6.8搭建Apache，用http访问svn

    前提:SVN已经安装配置ok,可以正常访问 目前本人svn用小乌龟客户端svn协议访问地址为:svn://ip:3691/opt/svn/repository,端口后面的是svn仓库的路径 那么如果从 ...

  2. zabbix 图形注释乱码

    1.寻找字体文件 1.1 首先需要找到zabbix后台的字体文件路径,字体文件的后缀为.ttf [root@zabbix ~]# cd /usr/share/zabbix/ [root@zabbix ...

  3. Jmeter分布式测试dubbo接口1

    最近工作中接到一个需求,需要对一个Dubbo接口进行压力测试,测试其性能,之前一直使用jmeter做压力测试,在踏了好多坑之后,决定把这些记录下来,顺便也希望能帮助到大家. 开始测试之前,我们需要先知 ...

  4. 认识 android-job

    简评: Android 实现后台任务的最佳实践. 对于现在的应用来说,在应用生命周期之外运行一些后台任务可以说已经是一项必不可少的需求了.这些任务可能是在某个时间点提醒用户什么事情或同步本地数据到服务 ...

  5. Codeforces 902 树同型构造 多项式长除法构造(辗转相除法)

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  6. springcloud 高可用的服务注册中心

    https://blog.csdn.net/forezp/article/details/81041101 上面是方老师的博客,看liuyan也有好多同学不是很清楚,这里自己也记录一下具体的做法. 1 ...

  7. 用小程序做一个类似于苹果AssistiveTouch功能

    一.首先我先介绍一下,我们要做一个什么样的项目功能 项目功能就是一个音频点击播放,当点击为播放的状态时,一个音频的动图出现,而且是可以跟随着手指的滑动而滑动,而且,在滑动动图的时候,当前下的页面是不可 ...

  8. .net reactor 加密混淆使用办法

    https://www.cnblogs.com/bile/p/10250888.html 概述:安装了.net reactor之后,可以在安装目录下找到帮助文档REACTOR_HELP.chm,目前没 ...

  9. 对promise.all底层的实现的研究

    1.Promise.all(iterable)返回一个新的Promise实例,此实例在iterable参数内素有的Promise都fulfilled或者参数中不包含Promise时,状态变成fulfi ...

  10. Linux培训教程　linux系统下分割大文件的方法

    在linux中分割大文件,比如一个5gb日志文件,需要把它分成多个小文件,分割后以利于普通的文本编辑器读取. 有时,需要传输20gb的大文件,Linux培训 教程件到另一台服务器,也需要把它分割成多个 ...