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

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

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

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

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

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

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

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

##親コンポーネントと子コンポーネント間の通信

• #兄弟コンポーネント間の通信

• 祖先コンポーネントと子孫コンポーネント間の通信

• 非リレーショナル コンポーネント間の通信

• 関係図:

3. コンポーネント間の通信方式

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

プロパティを通過する

• $emit を通じてカスタム イベントをトリガーする

• ##Use ref

• EventBus

• $parent または $root

• attrs とlistener

• ##Vuex

• props パスデータ

##の提供と注入

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

子コンポーネントは props 属性を設定し、受信側の親コンポーネントを定義します。パラメータ
親コンポーネントは、子コンポーネントのタグのリテラルを介して値を渡します
• 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">&lt;Children name=&quot;jack&quot; age=18 /&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

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

Chilfen.vue

this.$emit('add', good)

Father.vue

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&lt;Children @add=&quot;cartAdd($event)&quot; /&gt;</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">&lt;Children ref=&quot;foo&quot; /&gt; this.$refs.foo // 获取子组件实例，通过子组件实例我们就能拿到对应的数据</pre><div class="contentsignin">ログイン後にコピー</div></div>

EventBus

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

セントラル イベント バス EventBus を作成する
Siblingコンポーネントは $emit を渡します カスタム イベントをトリガーします。$emit の 2 番目のパラメータは渡された値です
別の兄弟コンポーネントは $on

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

  # 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('foo')

  Children2.vue

this.$bus.$on('foo', this.handle)

$parent または $ root

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

兄弟コンポーネント

this.$parent.on('add',this.add)

• 別の兄弟コンポーネント

  this.$parent.emit('add')

$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:'foo'  
    }  
}

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

vuex

• 适用场景: 复杂关系的组件数据传递

• Vuex作用相当于一个用来存储共享变量的容器 

• 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 サイトの他の関連記事を参照してください。