dispatch emit broadcast
1、broadcast 事件广播 遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params.
如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。 2、dispatch 查找所有父级,直到找到要找到的父组件,并在身上触发指定的事件。
@param { componentName } 组件名称@param { eventName } 事件名@param { params } 参数
vue2.0
父传子:Props
子传父:子:$emit(eventName) 父$on(eventName)
父访问子:ref
非父子组件通信 :https://vuefe.cn/guide/components.html#非父子组件通信
vue2.0 移除:1.$dispatch() 2.$broadcast() 3.events
vue1.0
<template><div id="app"><p>{{title}}</p><p v-text="title"></p><p v-text="title2"></p><p v-html="title2"></p></div>
</template>
<script>
export default {data () {return {title: 'this is a title!',title2: '<span>?<span> this is a title!'}}
}
</script>
{{title}}
和v-text="title"
等同export default
最后生成new vue({ 参数})
新的ES6写法等同于旧的写法
//新的ES6 data () { return {title: 'this is a title!' } }
//旧的写法 data: function (){ return {title: 'this is a title!' } }
v-html
解析渲染html标签
v-for 及v-bind控制class、v-on绑定事件、v-model双向绑定
<template><div id="app"><p>{{title}}</p><!-- <p v-text="title"></p> --><!-- <p v-text="title2"></p> --><!-- <p v-html="title2"></p> --><input v-model="newItem" v-on:keyup.enter="addNew"><ul><li v-for = "item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinished(item)">{{item.label}}</li></ul></div>
</template>
<script>
import Store from './store'
export default {data () {return {title: 'this is a todolist!',title2: '<span>?<span> this is a todolist!',items: Store.fetch(),newItem: ''}},watch: {items: {handler (items) {Store.save(items)},deep: true}},methods: {toggleFinished (item) {item.isFinished = !item.isFinished},addNew () {this.items.push({label: this.newItem,isFinished: false})this.newItem = ''}}
}
</script><style>
.finished{text-decoration: underline;
}html {height: 100%;
}body {display: flex;align-items: center;justify-content: center;height: 100%;
}#app {color: #2c3e50;margin-top: -100px;max-width: 600px;font-family: Source Sans Pro, Helvetica, sans-serif;text-align: center;
}#app a {color: #42b983;text-decoration: none;
}.logo {width: 100px;height: 100px
}
</style>
store.js
const STORAGE_KEY = 'todos-vuejs'
export default {fetch () {return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')},save (items) {window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))}
}
v-bind:class
简写:class
v-on:click
简写@click
v-on:keyup.enter
简写@keyup.enter
回车keyup事件v-model
双向绑定
JSON.parse()和JSON.stringify()
parse
用于从一个字符串中解析出json 对象。例如
var str='{"name":"cpf","age":"23"}'
经 JSON.parse(str) 得到:
Object: age:"23"name:"cpf"_proto_:Object
ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常
stringify
用于从一个对象解析出字符串,例如
var a={a:1,b:2}
经 JSON.stringify(a)得到:
“{“a”:1,"b":2}”
自定义事件
使用 $on() 监听事件;
使用 $emit()在它上面触发事件;
使用 $dispatch()派发事件,事件沿着父链冒泡;
使用 $broadcast()广播事件,事件向下传导给所有的后代。
父组件向子组件传递
1、采用props
父组件
<component-a msgfromfather='you die!!!!'></component-a>
子组件
<template><div class="hello"><h1>{{ msgfromfather }}</h1><button v-on:click="onClickMe">click!</button></div>
</template><script>
export default {data () {return {}},props: ['msgfromfather'],methods: {onClickMe () {console.log(this.msgfromfather)}}
}
</script>
<style scoped>
h1 {color: #42b983;
}
</style>
- props监听父组件传递过来的信息
- 传递过来后,可直接引用,就如已经传递过来数据塞到data
2、使用event,$broadcast()从父组件传递消息下去
父组件
<template>
<button v-on:click="talkToMyBoy('be a good boy')">talkToMyBoy</button></div>
</template>
<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {components: {ComponentA},methods: {talkToMyBoy (msg) {//console.log(msg);this.$broadcast('onAddnew',msg)}}
}
</script>
子组件
<template><div class="hello"><h1>{{ listentomyfather }}</h1></div>
</template>
<script>
export default {data () {return {listentomyfather: 'Hello from componentA!'}},events: {'onAddnew' (msg) {//console.log(msg)this.listentomyfather = msg}}
}
</script>
子组件向父组件传递
1.子组件$emit()触发,父组件$on()监听
<template><div class="hello"><button v-on:click="onClickMe">telltofather</button></div>
</template><script>
export default {methods: {onClickMe () {this.$emit('child-tell-me-something',this.msg)}}
}
</script>
父组件
<template>
<div id="app">
<p>child tell me: {{childWords}}</p>
<component-a v-on:child-tell-me-something='listenToMyBoy'></component-a>
</div>
</template><script>
import Store from './store'
import ComponentA from './components/componentA'
export default {components: {ComponentA},data () {return {childWords: ''}},methods: {listenToMyBoy (msg) {this.childWords = msg}}
}
</script>
2.不使用v-on,使用event ,子组件$dispatch(),从子组件传递消息上去
子组件
<template><div class="hello"><button v-on:click="onClickMe">talktomyfather</button></div>
</template><script>
export default {methods: {onClickMe () {this.$dispatch('child-tell-me-something',this.msg)}}
}
</script>
父组件
<template><div id="app"><p>child tell me: {{childWords}}</p><component-a></component-a></div>
</template><script>
import Store from './store'
import ComponentA from './components/componentA'
export default {components: {ComponentA},data () {return {childWords: ''}},events: {'child-tell-me-something' (msg) {this.childWords = msg}}
}
</script>
作者:俊瑶先森
链接:http://www.jianshu.com/p/240125faeb79
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
转载于:https://www.cnblogs.com/cina33blogs/p/7324348.html
dispatch emit broadcast相关推荐
- dispatch js实现_通信:派发与广播,on与emit,自行实现dispatch和broadcast方法
上一篇的 provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系.然后有两种场景它不能 ...
- vue之自行实现派发与广播-dispatch与broadcast
要解决的问题 主要针对组件之间的跨级通信 为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库 为什么不使用provide与inject? 因为它的 ...
- Vue中的情侣属性$dispatch和$broadcast详解
$dispatch 和 $broadcast 作为一对情侣 ?属性,在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 -- 通过向上或向下以冒泡的形式传递事件流,以实现嵌套父子组件的通信. ...
- $emit/$broadcast/$on用法
$emit() 方法带有两个参数. 1.name(字符串) 要发出的事件名称. 2.args(集合) 要把事件沿着作用域链向上派送(从子作用域到父作用域),我们要使用$emit()函数.$emit只能 ...
- vue中点击加号_vue 组件之间事件触发($emit)与event Bus($on)的用法说明
组件之间事件触发 之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说 ...
- Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
- angularjs1访问子组件_vue 组件通信看这篇就够了(12种通信方式)
vue 组件间的通信是 vue 开发中很基础也十分重要的部分,作为使用 vue 的开发者每天都在使用.同时,vue 通信也是面试中非常高频的问题,有很多面试题,都是围绕通信展开. 本文会介绍常见的通信 ...
- Vue 组件间的通讯
这一节我们一起看看 vue 中组件间的数据是如何传递的. 前面,我们已经初步建立了 vue 组件化的思想,知道如何创建组件.引入组件以及如何在组件里的一些功能.接下来,我们来学习怎么建立组件之间的连接 ...
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
最新文章
- 《Java虚拟机原理图解》5. JVM类加载器机制与类加载过程
- python中循环遍历字典
- 企业找到最佳增长点的 4 个关键因素
- iOS之深入解析缓存方法cache_t底层原理
- charles抓取手机APP,配置正确却抓不到数据
- 你所忽略的,覆盖equals时需要注意的事项《effective java》
- Android入门(九)| 滚动控件 ListView 与 RecyclerView
- 如何获取option的下标和值_数智化时代下,如何获取企业增长密码?
- resultMap标签与resultType的异同
- android关于pull解析的问题-1
- 怎么手动升级更新ubuntu系统到最新版
- linux源码安装php,nginx配置php
- 微软发布通知称MSN资讯应用即将停止提供简体中文服务
- 在vs2005调试asp程序
- web中将DataTable作为数据源导出Excel (带格式)
- 我国计算机辅助翻译专业,我国翻译硕士专业之计算机辅助翻译课程调查.pdf
- 渗透测试的种类(黑白盒)、脆弱性评估、OWASP Top 10、PTES-渗透测试执行标准
- Python根据字幕文件自动给视频添加字幕
- html倒计时插,JS倒计时插件
- 电气-NPN、PNP传感器应用
热门文章
- Latex 字母上面加符号 波浪线 横线 角号等
- 学习iPhone UIKit 9
- ABAQUS中橡胶大变形问题的解决方案
- Hazel引擎学习(三)
- 和岳父岳母的有效沟通
- 将Chrome浏览器网页背景改成豆绿色
- 【异常检测】基于主成分分类器的异常检测方案(文献学习)
- python爬取网易云音乐飙升榜音乐_python爬取网易云音乐热歌榜单(获取iframe中数据,src为空)...
- cph = CoxPHFitter()训练过程中遇到的坑以及画图
- 币须知道 |马云又抢占了一块高地,蚂蚁金服区块链跨境汇款正式落地,2018世界杯板块排名涨幅第一...