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 ...
随机推荐
- Ubuntu打开中文输入法
方法/步骤: 1.从system settings 进入language support 在keyboard input method system 中选择 ibus (这里以ibus为例) 然后cl ...
- .NET mocking框架Telerik JustMock发布R2 2019|附下载
Telerik JustMock是一个灵活.功能齐全的.NET mocking框架.Telerik JustMock能够简化单元测试,现在测试复杂的场景比以前更加容易了.同时JustMock还与Vis ...
- react axios 跨域问题
周末又是补充知识点的时候了,用了react axios 跨越问题,貌似是要比vue 稍微麻烦一点 它请求http好像是没有问题的,但是https还是有跨域问题的, 我用的刚好是create-react ...
- pyqt5-QFrame边框样式
继承 QObject-->QWidget-->QFrame 是一个基类, 可以选择直接使用,主要是用来控制一些边框样式:例如:凸起.凹下.阴影.线宽 QFrame对象效果对照图: im ...
- 理解 es7 async/await
简介 JavaScript ES7 中的 async / await 让多个异步 promise 协同工作起来更容易.如果要按一定顺序从多个数据库或者 API 异步获取数据,你可能会以一堆乱七八糟的 ...
- 关于react中context的使用
context是用于组件间数据的传递,就是减少props的使用 具体使用也很简单 第一步设置默认值,第二部用provider发放,第三步使用contextType来接受最近的provider,然后直接 ...
- Struts 2 配置Action详解_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 实现了Action处理类之后,就可以在struts.xml中配置该Action,从而让Struts 2框架知道哪个Act ...
- hdu 6377 : 度度熊看球赛
题目链接 题解: 将原问题转换为 对于全部 (2n)! 种情况,每种情况对ans的贡献为 D^k,其中k表示该情况下有k对情侣座位相邻. 预处理好共有 i (1<=i<=N)对情侣时,出现 ...
- spark数据倾斜与解决方法
一.数据倾斜 数据倾斜一般发生在对数据进行重新划分以及聚合的处理过程中.执行Spark作业时,数据倾斜一般发生在shuffle过程中,因为Spark的shuffle过程需要进行数据的重新划分处理.在执 ...
- 【curl】cookie的分隔符
cookie是以分号作为分隔符的. ex: curl --silent -H "Host: xxx.com" "172.172.178.9:80/item/comm?pi ...