二、综合组件之间的通信

实现一个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. mysql5.7二进制包进行多实例安装

    一.需求 在一台服务器上安装mysql5.7,并且部署两个实例:3306用于本机主库,3307用于其他MYSQL服务器的从库 二.下载mysql二进制包 [root@push-- src]# -lin ...

  2. linux tar压缩解压命令的详细解释

    tar [-cxtzjvfpPN] 文件与目录 参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件!特别注意 ...

  3. robotframework 使用Chrome手机模拟器两种方法

    Open Google Simulator1 ${device metrics}= Create Dictionary width=${360} height=${640} pixelRatio=${ ...

  4. json与string与map的理解

    json是一种特殊格式的string字符串,也就是json也是string类型,只是这种string是有格式的,那么他的格式就是类似map的格式[key:value] 举例子: Map map = r ...

  5. 【leetcode】689. Maximum Sum of 3 Non-Overlapping Subarrays

    题目如下: In a given array nums of positive integers, find three non-overlapping subarrays with maximum ...

  6. c# linq 分组groupby

    转载: https://www.cnblogs.com/cncc/p/9846390.html 一.先准备要使用的类: 1.Person类: class Person { public string ...

  7. IDEA如何将git下来的是工程转为maven工程

    1.在工程名称上右击并点击[Add Framework Support] 2.在打开的[Add Framework Support]窗口中在左侧栏找到[Maven]选项并勾上并点击[OK]按钮.

  8. Composite UI Application Block(CAB)

    序言 资料 https://www.cnblogs.com/lglruirui/archive/2010/06/21/1761737.html?tdsourcetag=s_pcqq_aiomsg ht ...

  9. BZOJ 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 水题~

    水~ #include <cstdio> #define N 100004 #define mod 5000011 #define setIO(s) freopen(s".in& ...

  10. [luogu]P3959 宝藏[NOIP][状态压缩DP]

    [luogu]P3959 宝藏[TREASURE] 题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的 ...