vue中不同情况下怎么进行通讯?下面本篇文章给大家分析一下vue中不同情况下的通讯方式,希望对大家有所帮助!
其实对于vue中组件通讯这件事大家也都不陌生。甚至张口就来,毕竟这也是面试中的经常会问到的。由于之前没有进行过细致的考虑,在写小项目的时候遇到了组件中通讯的需求,然后上来就写,结果发现没有用,查了好久才知道那种方式不适用这样情况。所以经过这次事情决定写篇文章,对于通讯方式进行更清楚更细致的分类,毕竟不是每种通讯方式都适用于所有场景。(学习视频分享:vuejs教程)
同浏览器同页签内主要涉及的就是父子组件的传值。
对于状态管理器的概念大家应该也不会陌生。
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
provide
和 inject
绑定并不是可响应的。不过如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。// parent.vue // 此处忽略template模板的东西 <script> export default { name: 'parent', // provide有两种写法 // 第一种 provide: { a: 1, b: 2 } // 第二种 provide() { return { a: 1, b: 2 } } } </script>
// child.vue // 此处忽略template模板的东西 <script> export default { name: 'child', // inject // 第一种 inject: [ 'a', 'b' ] // 第二种 inject: { abc: { // 可以指定任意不与data,props冲突的变量名,然后指定是指向provide中的哪个变量 from: 'a', default: 'sfd' // 如果默认值不是基本数据类型,那就得改用:default: () => {a:1,b:2} }, b: { default: '33' } } } </script>
正经的props/$emit可太常见了,都是用烂了的,就不用写示例代码了吧。
问题:
// utils/eventBus.js import Vue from 'vue' const EventBus = new Vue() export default EventBus
// main.js // 进行全局挂载 import eventBus from '@/utils/eventBus' Vue.prototype.$eventBos = eventBus
// views/parent.vue <template> <div> <button @click="test">测试</button> </div> </template> <script> export default { data() { return {} }, methods: { test() { this.$eventBus.$emit('testBus', 'test') } } }
// views/child.vue <template> <div> {{ testContent }} <!-- test --> </div> </template> <script> export default { data() { return { testContent: '' } }, mounted() { this.$eventBus.$on('test', e => this.testContent = e) } }
prop
接收会自动设置到子组件内部的最外层标签上,如果是 class
和 style
的话,会合并最外层标签的 class
和 style
。prop
属性,可以使用 inheritAttrs
禁用继承,然后通过 v-bind="$attrs"
把外部传入的 非 prop
属性设置给希望的标签上,但是这不会改变 class
和 style
$attrs
来代理获取所有父组件传过来的值。.native
修饰器的) v-on
事件监听器。它可以通过 v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用示例:这是父组件
这是子组件
这是执行展示:
同时可以发现子组件加上inheritAttrs:false之后根组件里的未声明props接受的变量消失了
同浏览器的不同页签之间的通讯,大多数的场景是:项目里的增删改查都是打开的新页面,然后新增结束后就触发列表页重新获取列表。这种场景下有什么方法呢?
// 需要监听的页面 mounted() { window.addEventListener('storage', this.storageEvent); }, beforeDestroy() { window.removeEventListener() } methods: { storageEvent(e) { console.log("storage值发生变化后触发:", e) } }
不同浏览器的同一网站的有通讯的必要吗?
如果有那就:websocket(比如聊天室)
哈哈哈哈
以上就是vue中不同情况下怎么进行通讯?方式分享的详细内容,更多请关注php中文网其它相关文章!
已抢187093个
抢已抢67502个
抢已抢353768个
抢已抢668458个
抢已抢123859个
抢已抢26039个
抢