vue でさまざまな状況でコミュニケーションするにはどうすればよいですか?共有する方法-Vue.js-php.cn

vue でさまざまな状況でコミュニケーションするにはどうすればよいですか?共有する方法

青灯夜游

リリース： 2022-04-20 21:06:28

転載

2492 人が閲覧しました

vue でさまざまな状況でコミュニケーションするにはどうすればよいですか?次の記事では、vue におけるさまざまな状況におけるコミュニケーション方法を分析します。

vue でさまざまな状況でコミュニケーションするにはどうすればよいですか?共有する方法

実際、vue でのコンポーネント通信については誰もがよく知っています。口を開いても結局面接でよく聞かれるのがこれです。今までじっくり考えたことがなかったので、小さなプロジェクトを書いているときに、コンポーネントでの通信が必要なことに気づき、書き始めたところ、それは無駄だったことがわかり、ずっとチェックしていて気づきました。その方法はこの状況には適していないということです。この出来事を受けて、コミュニケーション方法をより明確かつ慎重に分類する記事を書くことにしました結局のところ、すべてのコミュニケーション方法がすべてのシナリオに適しているわけではありません。 (学習ビデオ共有: vuejs チュートリアル)

同じウィンドウ (つまり、同じブラウザーの同じタブ)

同じブラウザの同じページタブで主に行われるのは、親コンポーネントと子コンポーネント間の値の転送です。

vuex: ステートマネージャー: プロジェクト内のあらゆるコンポーネントに適用可能、非常に包括的

あなたはおそらくステートマネージャーの概念を知らないでしょう。。

複数のコンポーネントは 1 つ以上のステータス値を共有できます。コンポーネント階層がどんなに深くても、正常にアクセスできます。したがって、これは公式に直接サポートされている通信方法です。
注: 小規模な単一ページのアプリケーションの場合、このオプションはあまり推奨されません. 小規模なプロジェクトの場合、vuex の使用はより面倒になります (75kg 150cm の男性が着る服など) 110kgの人はとてもぶかぶかで持ち上げられません。

provide / inject (v2.2.1 以降に基づいて作成): N レベルのコンポーネントに適していますが、単一行継承のタイプである必要があります

このペアオプションは、コンポーネント階層の深さに関係なく、上流と下流の関係が確立されている限り、祖先コンポーネントがそのすべての子孫に依存関係を注入できるようにするために一緒に使用する必要があります。

N 階建ての建物に相当します。最上層が親コンポーネントです。各階の間に共通のパイプがあります。このパイプは提供されます。パイプには、各フロアに inject
という出口があります。注: provide および inject バインディングは応答しません。ただし、リッスン可能なオブジェクトを渡しても、オブジェクトのプロパティは引き続き応答します。
コードを見てみましょう

// 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: 2 つの隣接するコンポーネント (親->子) によって渡される値に適用されます; $emit: child- > Parent

Serious props/$emit はあまりにも一般的であり、すべて過剰に使用されているため、サンプルコードを記述する必要はありません。

隣接するレベルの親コンポーネントと子コンポーネント間の値の転送にのみ適用されます
プロップは、マルチレベルコンポーネントの値を転送するために使用することもできますが、これはmake コードは保守が非常に困難なので、あまりお勧めできません。

eventBus: ステータスは vuex のステータスに似ています。あらゆるコンポーネントに適しており、非常に包括的です。

問題:

保守が不便です。: プロジェクト内でメソッド名が競合しすぎると、例外が発生する可能性があり、トラブルシューティングがさらに不便になります。
例:

// utils/eventBus.js
import Vue from &#39;vue&#39;
const EventBus = new Vue()
export default EventBus

ログイン後にコピー

// main.js
// 进行全局挂载
import eventBus from &#39;@/utils/eventBus&#39;
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 / $listeners

$attrs
- 公式説明 :
  - 親コンポーネントからカスタムサブコンポーネントに渡されるプロパティは、prop がない場合、サブコンポーネント内の最も外側のラベルに自動的に設定されます (# の場合)。 ##class と style の場合、最も外側のタグ class と style がマージされます。
  - prop 属性を継承したくない場合は、inheritAttrs を使用して継承を無効にしてから、 v-bind="$ attrs" は、外部から渡された非 prop 属性を目的のタグに設定しますが、これによって class と は変更されません。 style
- プロキシは、親コンポーネントによって渡されたすべての値を取得します。例: これは親コンポーネントです

vue でさまざまな状況でコミュニケーションするにはどうすればよいですか?共有する方法

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

vue でさまざまな状況でコミュニケーションするにはどうすればよいですか?共有する方法

- 这是子组件

vue でさまざまな状況でコミュニケーションするにはどうすればよいですか?共有する方法

- 这是执行展示：
- 同时可以发现子组件加上inheritAttrs:false之后根组件里的未声明props接受的变量消失了
最后：建议最好不要用这个玩意，虽然他们都可以相对便捷的将第一级组件的属性，方法回调传递给N级子组件中的任一级，但是之后进行bug定位，或者分析需求将会是一个比较大的挑战。

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

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

监听stroage事件

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

ログイン後にコピー