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中数组
子组件 和 父组件通信、
<!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--综合组件间的通信的更多相关文章
- Vue 父子组件间的通信
前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...
- Vue父子组件间的通信
父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div> <div style="background:#344 ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- vuejs单一事件管理组件间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js组件之间的通信
导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...
- Vue.js组件间通信方式总结
平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
随机推荐
- 批量恢复zencart产品表所属分类master_categories_id为0的产品
批量恢复zencart产品表所属分类master_categories_id为0的产品 将下面代码保存为master_categories_id.php,上传到网站根目录运行即可,操作前先备份数据库 ...
- boost多线程编译出错
添加 -lpthread CPLUS_INCLUDE_PATH=$CPLUS_INCLUDE_PATH:/tools/boost/includeexport CPLUS_INCLUDE_PATH LI ...
- Java 集合类库
java类库的基本结构 Iterable public interface Iterable<T> 实现这个接口允许对象成为 "foreach" 语句的目标. 也就是说 ...
- java 集合之HashMap、Hashtable、LinkedHashMap、TreeMap
HashMap 实现了Map接口,线程不安全. 实现原理: HashMap由数组+链表组成,数组是HashMap的主体,链表则是主要为了解决哈希冲突而存在的. 如果通过hash定位到数组位置没有链表, ...
- 【bzoj2300】【Luogu P2521】 [HAOI2011]防线修建 动态凸包，平衡树，Set
一句话题意:给你一个凸包,每次可以插入一个点或者询问周长. 动态凸包裸题嘛,用\(Set\)实现.最初每个点坐标做乘三处理,便于取初始三角形的重心作为凸包判定原点. #include <bits ...
- percon server5.7的配置版本
percon server5.7的配置版本 [root@tidb-db-backup mysql_3306]# cat my_3306.cnf # my_3306.cnf [client] port ...
- Nginx静态文件服务器配置方法
在Java开发以及生产环境中,最常用的web应用服务器当属Tomcat,尽管这只猫也能够处理一些静态请求,例如图片.html.样式文件等,但是效率并不是那么尽人意.在生产环境中,我们一般使用Nginx ...
- 新建的COM组件中没有 MESSAGE_HANDLER(WM_INITDIALOG, OnInitDialog)
创建ATL组件之后,添加简单ATL对象,添加对话框资源,随后发现没有m_hWnd句柄,不响应初始化函数. 于是重新创建ATL组件,之后添加ATL控件,添加对话框资源,有m_hWnd句柄,但仍然不响应初 ...
- 运行roslaunch启动节点报错找不到节点
报错信息: ERROR: cannot launch node of type [${package_name}/${package_name}_node]: can't locate node [$ ...
- c#翻页效果
用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...