vue综合组件间的通信详解


Posted in Javascript onNovember 06, 2017

本文实例为大家分享了vue综合组件间的通信,供大家参考,具体内容如下

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

子组件 和 父组件通信:

vue综合组件间的通信详解

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 #Javascript
js中apply与call简单用法详解
Nov 06 #Javascript
js实现简单数字变动效果
Nov 06 #Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
You might like
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
详解React中setState回调函数
2018/06/14 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Vue实现简易计算器
2020/02/25 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
python删除不需要的python文件方法
2018/04/24 Python
深入浅析python 中的匿名函数
2018/05/21 Python
pymysql模块的操作实例
2019/12/17 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
商场活动策划方案
2014/01/24 职场文书
小学毕业演讲稿
2014/04/25 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2014年业务工作总结
2014/11/17 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
学校运动会通讯稿
2015/07/18 职场文书
《绝招》教学反思
2016/02/20 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
postgresql中如何执行sql文件
2023/05/08 PostgreSQL