二、综合组件之间的通信

实现一个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. puppet工简介一

    puppet简介一 puppet工作原理 puppet 是一个配置管理工具, 典型的, puppet 是一个 C/S 结构, 当然,这里的 C 可以有很多,因 此,也可以说是一个星型结构. 所有的 p ...

  2. Linux20期学习笔记 Day4

    环境变量.常用系统变量:vim编辑器使用方法及实验:shell脚本两个层次 内置参数及相关实验

  3. HDU 6215 Brute Force Sorting 模拟双端链表

    一层一层删 链表模拟 最开始写的是一个一个删的 WA #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) mem ...

  4. string::front

    char& front(); const char& front() const;功能:返回string对象的首个字符,可以改变它的值 #include <string># ...

  5. git初始化命令行指引

    Git 全局设置 git config --global user.name "陈耿聪" git config --global user.email "swain@di ...

  6. feign 发送请求时，传多个参数时的写法

    第一:传参方式写法,当参数个数大于2个时,需要用@RequestParam @PostMapping(value = "/configReader/configValue.do", ...

  7. DevExpress Windows 10 v19.1新版亮点：UWP控件新功能全面解析

    行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPF v19.1中新增的一些控件及部 ...

  8. Kendo UI使用教程：CDN服务

    [Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...

  9. 转：ThreadLocal剖析

    转自http://www.cnblogs.com/dolphin0520/p/3920407.html 一.对ThreadLocal的理解 ThreadLocal,很多地方叫做线程本地变量,也有些地方 ...

  10. MySQL事务以及特征

    1.什么是事务? 在现实生活中,我们往往会进行转账操作.转账可以分为两部分完成,转入和转出,只要两部分都完成了才算转账完成.在数据库中,这个过程是由两条sql语句来完成的, 如果任意一方的语句没有执行 ...