Bagaimana untuk berkomunikasi dalam situasi yang berbeza dalam vue? cara berkongsi

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)

Dalam tetingkap yang sama (iaitu, dalam tab yang sama pada penyemak imbas yang sama)

Tetingkap yang sama Apa yang terlibat terutamanya dalam tab halaman yang sama pada penyemak imbas ialah pemindahan nilai antara komponen ibu bapa dan anak.

vuex: pengurus negeri: terpakai kepada mana-mana komponen dalam projek, sangat bertolak ansur

Anda mungkin tidak tahu konsep pengurus negeri sama ada keanehan.

• Berbilang komponen boleh berkongsi satu atau lebih nilai keadaan. Tidak kira betapa dalam hierarki komponen, ia boleh diakses secara normal. Jadi ini adalah kaedah komunikasi yang disokong secara langsung secara rasmi.
• Nota: Untuk aplikasi satu halaman kecil, pilihan ini tidak begitu disyorkan Untuk projek kecil, menggunakan vuex akan menjadi lebih rumit, seperti 75kg 150cm Seseorang yang berukuran 170cm dan berat. 110 paun memakai sehelai pakaian Ia kelihatan sangat longgar dan tidak boleh dipegang.

menyediakan / menyuntik (ditulis berdasarkan v2.2.1 dan ke atas): sesuai untuk komponen peringkat N, tetapi mestilah jenis warisan satu baris

bersamaan dengan bangunan dengan tingkat N Peringkat atas ialah komponen induk Terdapat paip biasa di antara setiap lantai. Paip mempunyai pintu keluar pada setiap tingkat yang dipanggil: inject
• Nota:
• dan provide ikatan tidak responsif. Walau bagaimanapun, jika anda lulus dalam objek yang boleh didengar, sifat objek masih responsif. inject
Mari kita lihat kod

// parent.vue
// 此处忽略template模板的东西
<script>
export default {
    name: &#39;parent&#39;,
    // provide有两种写法
    // 第一种
    provide: {
        a: 1,
        b: 2
    }
    // 第二种
    provide() {
        return {
            a: 1,
            b: 2
        }
    }
}
</script>

// child.vue
// 此处忽略template模板的东西
<script>
export default {
    name: &#39;child&#39;,
    // inject
    // 第一种
    inject: [ &#39;a&#39;, &#39;b&#39; ]
    // 第二种
    inject: {
        abc: { // 可以指定任意不与data，props冲突的变量名，然后指定是指向provide中的哪个变量
            from: &#39;a&#39;,
            default: &#39;sfd&#39; // 如果默认值不是基本数据类型，那就得改用：default: () => {a:1,b:2}
        },
        b: {
            default: &#39;33&#39;
        }
    }
}
</script>

props: terpakai pada pemindahan nilai antara dua komponen bersebelahan (ibu bapa->anak); emit : Anak-> Ibu bapa

Prop serius/$emit terlalu biasa dan digunakan secara berlebihan, jadi tidak perlu menulis kod sampel.

Hanya sesuai untuk pemindahan nilai antara komponen ibu bapa dan anak pada tahap bersebelahan
Walaupun prop juga boleh digunakan untuk memindahkan nilai ​​​​untuk komponen berbilang peringkat, tetapi, ini akan menjadikan kod Sangat sukar untuk dikekalkan dan sangat tidak disyorkan.

eventBus: Status adalah serupa dengan vuex, sesuai untuk mana-mana komponen, sangat inklusif

Masalah:

Menyusahkan untuk maintain : Jika digunakan terlalu banyak dalam projek, konflik nama kaedah boleh menyebabkan pengecualian dan lebih menyusahkan untuk menyelesaikan masalah.
Contoh:

// 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(&#39;testBus&#39;, &#39;test&#39;)
        }
    }
}

// views/child.vue
<template>
    <div>
        {{ testContent }} <!-- test -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            testContent: &#39;&#39;
        }
    },
    mounted() {
        this.$eventBus.$on(&#39;test&#39;, e => this.testContent = e)
    }
}

$attrs / $pendengar

$ attrs
• • Penjelasan rasmi:
    Atribut yang dihantar daripada komponen induk kepada subkomponen tersuai Jika tiada
    • diterima, ia akan ditetapkan secara automatik ke kedudukan paling luar di dalam subkomponen. Pada teg lapisan, jika ia prop dan class, style dan class teg paling luar akan digabungkan. style
    Jika komponen anak tidak mahu mewarisi atribut bukan
    • yang dihantar oleh komponen induk, anda boleh menggunakan prop 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
  Apabila komponen induk menghantar nilai ​​​​kepada komponen anak, tetapi komponen anak tidak semuanya melepasi nilai dalam props Apabila mengisytiharkan, anda boleh menggunakan
  • dalam komponen anak untuk proksi untuk mendapatkan semua nilai yang diluluskan oleh komponen induk. $attrs
  Contoh: Ini ialah komponen induk

• Ini ialah komponen kanak-kanak: tiada prop yang diisytiharkan

  

  Ini ialah paparan dom:

  

  • 此时，通过dom可以发现，所有没有声明的信息，全部出现在了子组件的根元素上。
  • 如果要让没有声明的信息不出现在子组件的根元素上，那就在子组件与data同级的位置加个属性：inheritAttrs: false；这样就不会未通过props接收的变量就不会出现在子组件的根元素上了
  • 至于怎么传递给子组件的子组件的子组件的子组件....等，那就需要给子组件的子组件依次都绑定：v-bind="$attrs"即可。
  • 注意这样只适用于传递数据。
• $listeners
  • 官方解释：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用
  • 当父组件向子组件传递回调时，子组件可以通过$listeners代理所有回调。

  • 示例：这是父组件

• • 这是子组件

• • 这是执行展示：

    
    

  • 同时可以发现子组件加上inheritAttrs:false之后根组件里的未声明props接受的变量消失了

    
    

• 最后：建议最好不要用这个玩意，虽然他们都可以相对便捷的将第一级组件的属性，方法回调传递给N级子组件中的任一级，但是之后进行bug定位，或者分析需求将会是一个比较大的挑战。

不同窗口(同浏览器不同页签内)

同浏览器的不同页签之间的通讯，大多数的场景是：项目里的增删改查都是打开的新页面，然后新增结束后就触发列表页重新获取列表。这种场景下有什么方法呢？

监听stroage事件

// 需要监听的页面
mounted() {
    window.addEventListener('storage', this.storageEvent);
}，
beforeDestroy() {
    window.removeEventListener()
}
methods: {
    storageEvent(e) {
        console.log("storage值发生变化后触发:", e)
    }
}

• 切记：第一条：要记得将监听的事件在组件销毁之前解除监听。否则会给你惊”喜“
• 切记：第二条：其中监听方法回调一定要在methods中定义，然后通过this进行引用，否则你在解除事件监听的时候将无效。

不同浏览器

不同浏览器的同一网站的有通讯的必要吗？
如果有那就：websocket(比如聊天室)
哈哈哈哈

（学习视频分享：web前端开发、编程入门）

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!