How to communicate in different situations in vue? The following article will analyze the communication methods in different situations in vue. I hope it will be helpful to everyone!
In fact, everyone is familiar with component communication in vue. Even if you open your mouth, after all, this is what is often asked in interviews. Since I had not considered it carefully before, when I was writing a small project, I encountered the need for communication in components, and then I started writing it. It turned out that it was useless. After checking for a long time, I realized that that method was not suitable for this situation. So after this incident, I decided to write an article to classify communication methods more clearly and carefully. After all, not every communication method is suitable for all scenarios. (Learning video sharing: vuejs tutorial)
Same What is mainly involved in the same page tab of the browser is the value transfer between parent and child components.
You probably don’t know the concept of a state manager. strangeness.
This pair Options need to be used together to allow an ancestor component to inject a dependency into all its descendants, no matter how deep the component hierarchy is, and for as long as the upstream and downstream relationships are established.
provide and inject bindings are not responsive. However, if you pass in a listenable object, the object's properties are still responsive. // 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>Serious props/$emit are too common, and they are all overused, so there is no need to write sample code.
Problem:
// 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 will be automatically set to the outermost label inside the subcomponent, if it is # For ##class and style, the outermost tags class and style will be merged. attributes passed in by the parent component, you can use inheritAttrs to disable inheritance, and then pass v-bind="$ attrs" sets the externally passed non-prop attributes to the desired tag, but this will not change the class and style in the child component. The proxy gets all the values passed by the parent component. 
.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(比如聊天室)
哈哈哈哈
The above is the detailed content of How to communicate in different situations in vue? way to share. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
