二、综合组件之间的通信

实现一个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. suse清除kthrotlds木马病毒

    一.服务器感染了kthrotlds挖矿病毒 [root@51yt bin]# cd /bin/ [root@51yt bin]# wget https://busybox.net/downloads/ ...

  2. dataTable 、dataView、Dataset 区别

    dataTable .dataView.Dataset 区别的经典回答 1.DataView是DataTable的表示,DataTable表里的记录是没有顺序的,但显示可以有不同顺序(DataVIew ...

  3. AngularJs 简单实现全选，多选操作(转)

    代码如下: HTML: <section> <pre>{{choseArr}}</pre> 全选: <input type="checkbox&qu ...

  4. js前台页面显示中文，后台存对应的value值实现

    field: 'rightType', title: '权益类型', //width: 100, align: 'left', valign: 'top', sortable: true, forma ...

  5. chrome 开发者工具 - local overrides

    使用chrome 作为本地网络服务 chrome 65+ 新功能, 使用我们自己的本地资源覆盖网页所使用的资源,可以使用本地css文件覆盖网页的css文件,修改样式. 类似的,使用DevTools的工 ...

  6. NodeJs 提供了 exports 和 require 两个对象

    Node.js 提供了 exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对象. 创建 ...

  7. 18.二叉树的镜像(python)

    题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. class Solution: # 返回镜像树的根节点 def Mirror(self, root): # write code here if ...

  8. 源码编译git-go

    2018.8.29 安装指定版本的git 一,安装 编译前准备: 依赖库 yum install curl-devel expat-devel gettext-devel openssl-devel ...

  9. win10 搜索框输入没提示

    1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可

  10. 由于数据库 'XXX' 离线,无法打开该数据库。

    大家使用sql server 进行还原的时候可能会遇到: system.Data.SqlClient.SqlError:因为数据库正在使用,所以无法获得对数据库的独占访问权 这个错误 下面是有一个解决 ...