vueの通信方式にはどのようなものがありますか?-フロントエンドQ&A-php.cn

vueの通信方式にはどのようなものがありますか?

青灯夜游

リリース： 2022-12-21 20:05:57

オリジナル

7552 人が閲覧しました

通信方法: 1. サブコンポーネントは props 属性を設定し、親コンポーネントから渡されるパラメータを定義します。コンポーネントは、サブコンポーネントタグを使用するときにリテラルを介して値を渡します。 2. サブコンポーネントは $emit を通じてカスタムイベントをトリガーして通信します。 3. 通信には ref を使用します。 4. 通信には EventBus を使用します。 5. $parent または $root を使用して通信します。 6. $attrs を使用して $listeners と通信します。 7. Provide と Inject を使用して通信します。 8. vuex を使用します。

vueの通信方式にはどのようなものがありますか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

コンポーネントが vue の最も強力な機能の 1 つであることは誰もが知っています。vue の各 .vue をコンポーネントとみなすことができます。通信とは、送信者が特定のメディアを通じて特定の形式で情報を送信することを指します。受信者が特定の目的を達成するために。大まかに言えば、情報トラフィックはコンポーネント間の通信であり、コンポーネント (.vue) が特定の目的を達成するために何らかの方法で情報を渡すことを意味します。たとえば、UI フレームワークでテーブルコンポーネントを使用する場合、テーブルに移動することがあります。特定のデータが渡され、これが基本的にコンポーネント間の通信を形成します。

1. コンポーネント間の通信によって何が解決されますか?

古代、人々は旅館、空飛ぶハト、ビーコン火災警報器、シンボル、言語、目を通してメッセージを伝えました。現在、科学技術の急速な発展に伴い、通信は有線または無線で完結することが基本となり、有線電話、固定電話、無線電話、携帯電話、インターネット、さらにはテレビ電話など、さまざまな通信手段が登場しています。以上よりこの一節から、コミュニケーションの本質は情報の同期であることがわかります共有はvueに戻ります各コンポーネントには独自のスコープがありますコンポーネント間のデータは共有できませんしかし、実際の開発作業では、多くの場合、コンポーネント間でデータを共有する必要がありますが、これはコンポーネント通信の目的でもあり、有機的で完全なシステムを形成するためにコンポーネント間で通信できるようにします

2. コンポーネント間の通信の分類

コンポーネント間通信の分類は次のように分類できます。

#兄弟コンポーネント間の通信
祖先コンポーネントと子孫コンポーネント間の通信
非リレーショナルコンポーネント間の通信
関係図:

vueの通信方式にはどのようなものがありますか? 3. コンポーネント間の通信方式

従来の 8 つの通信方式を vue で整理

プロパティを通過する

$emit を通じてカスタムイベントをトリガーする
##Use ref
EventBus
$parent または $root
attrs とlistener
##Vuex
props パスデータ

##の提供と注入

#適用可能なシナリオ: 親コンポーネントが子コンポーネントにデータを渡す

vueの通信方式にはどのようなものがありますか?

Children.vue

props:{  
    // 字符串形式  
 name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
       require:true // age属性必须传递  
    }  
}

ログイン後にコピー

Father.vue

Component<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><Children name="jack" age=18 /></pre><div class="contentsignin">ログイン後にコピー</div></div>

$emit はカスタムイベントをトリガーします

該当するシナリオ: 子コンポーネントは親コンポーネントにデータを渡します。子コンポーネントは $emit を通じてカスタムイベントをトリガーし、$emit の 2 番目のパラメータは渡された値です。親コンポーネントはリスナーをバインドして、コンポーネントによって渡される子パラメータ

Chilfen.vue

this.$emit(&#39;add&#39;, good)

ログイン後にコピー

Father.vue

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><Children @add="cartAdd($event)" /></pre><div class="contentsignin">ログイン後にコピー</div></div>

ref

子コンポーネントを使用するときに親コンポーネントが設定されますref

親コンポーネントコンポーネントは子コンポーネントによって設定されますrefデータを取得するには
親コンポーネント<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><Children ref="foo" /> this.$refs.foo // 获取子组件实例，通过子组件实例我们就能拿到对应的数据</pre><div class="contentsignin">ログイン後にコピー</div></div>

使用シナリオ: 兄弟コンポーネントが値を渡す

## を通じてカスタムイベントをリッスンします
# Bus.js

// 创建一个中央时间总线类  
class Bus {  
  constructor() {  
    this.callbacks = {};   // 存放事件的名字  
  }  
  $on(name, fn) {  
    this.callbacks[name] = this.callbacks[name] || [];  
    this.callbacks[name].push(fn);  
  }  
  $emit(name, args) {  
    if (this.callbacks[name]) {  
      this.callbacks[name].forEach((cb) => cb(args));  
    }  
  }  
}  
  
// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
// 另一种方式  
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

ログイン後にコピー

Children1.vue
```
this.$bus.$emit(&#39;foo&#39;)
```
ログイン後にコピー
Children2.vue

this.$bus.$on(&#39;foo&#39;, this.handle)

ログイン後にコピー

$parent または $ root

共通の祖先 $parent または $root を介して通信ブリッジを構築する

兄弟コンポーネント

this.$parent.on(&#39;add&#39;,this.add)

ログイン後にコピー

別の兄弟コンポーネント
```
this.$parent.emit(&#39;add&#39;)
```
ログイン後にコピー

$attrs と $listeners

該当するシナリオ: 祖先が子孫にデータを渡す

バッチアップロード属性 $attrs および $listeners を設定します

包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件

// child：并未在props中声明foo  
<p>{{$attrs.foo}}</p>  
  
// parent  
<HelloWorld foo="foo"/>

ログイン後にコピー

// 给Grandson隔代传值，communication/index.vue  
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>  
  
// Child2做展开  
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>  
  
// Grandson使⽤  
<div @click="$emit(&#39;some-event&#39;, &#39;msg from grandson&#39;)">  
{{msg}}  
</div>

ログイン後にコピー

provide 与 inject

在祖先组件定义provide属性，返回传递的值
在后代组件通过inject接收组件传递过来的值

祖先组件

provide(){  
    return {  
        foo:&#39;foo&#39;  
    }  
}

ログイン後にコピー

后代组件

inject:[&#39;foo&#39;] // 获取到祖先组件传递过来的值

ログイン後にコピー

vuex

适用场景: 复杂关系的组件数据传递
Vuex作用相当于一个用来存储共享变量的容器

vueの通信方式にはどのようなものがありますか?

state用来存放共享变量的地方
getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
mutations用来存放修改state的方法。
actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
复杂关系的组件数据传递可以通过vuex存放共享的变量

【相关推荐：vuejs视频教程、web前端开发】

以上がvueの通信方式にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。