Bagaimana untuk berkomunikasi dalam situasi berbeza dalam Vue? Artikel berikut akan menganalisis kaedah komunikasi dalam vue dalam keadaan yang berbeza saya harap ia akan membantu semua orang.
Malah, semua orang sudah biasa dengan komunikasi komponen dalam vue. Kalau buka mulut pun, lagipun inilah yang sering ditanya dalam temuduga. Oleh kerana saya tidak mempertimbangkannya dengan teliti sebelum ini, apabila saya menulis projek kecil, saya menghadapi keperluan untuk komunikasi dalam komponen, dan kemudian saya mula menulisnya Ternyata ia tidak berguna untuk masa yang lama, saya sedar bahawa kaedah itu tidak sesuai untuk keadaan ini. Jadi selepas kejadian ini, saya memutuskan untuk menulis artikel untuk mengklasifikasikan kaedah komunikasi dengan lebih jelas dan berhati-hati Lagipun, tidak setiap kaedah komunikasi sesuai untuk semua senario. (Belajar perkongsian video: tutorial vuejs)
Tetingkap yang sama Apa yang terlibat terutamanya dalam tab halaman yang sama pada penyemak imbas ialah pemindahan nilai antara komponen ibu bapa dan anak.
Anda mungkin tidak tahu konsep pengurus negeri sama ada keanehan.
provide ikatan tidak responsif. Walau bagaimanapun, jika anda lulus dalam objek yang boleh didengar, sifat objek masih responsif. inject
// 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>// 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 dan class, style dan class teg paling luar akan digabungkan. styleprop untuk melumpuhkan warisan, dan kemudian gunakan inheritAttrs untuk menetapkan bukan- Atribut v-bind="$attrs" dihantar dari luar ke teg yang diingini, tetapi ini tidak akan berubah prop dan classstyle$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(比如聊天室)
哈哈哈哈
Atas ialah kandungan terperinci Bagaimana untuk berkomunikasi dalam situasi yang berbeza dalam vue? cara berkongsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
