vuejsで親子通信を設定する方法-Vue.js-php.cn

vuejs で親子通信を設定する方法: 1. 親コンポーネントは props を使用して子コンポーネントにデータを渡します; 2. 子コンポーネントは「$emit」を通じて親コンポーネントにメッセージを送信します; 3 . ".sync" 糖衣構文を使用する; 4. "$attrs" と "$listeners" を使用する; 5. private と inject を使用する。

vuejsで親子通信を設定する方法

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

Vue には、親コンポーネントと子コンポーネントの間で次の通信メソッドがあります:

props
## $emit -- コンポーネントのカプセル化に一般的に使用されます
.sync -- 糖衣構文
$attrs および $listeners -- コンポーネントのカプセル化に使用されます多数の
privideとinject -- 高次コンポーネント

以下にそれぞれ紹介します

#1、 props

これは日常の開発でよく使われます。簡単に言うと、props を介して子コンポーネントにデータを渡すことができます。水道管のように、親コンポーネントのデータが上から下に流れます。は、流れに逆らって流れることはできません。これは、Vue の設計導入における単一のデータフローでもあります。

  
 // Js let Child = Vue.extend({ template: '{{ content }}
', props: { content: { type: String, default: () => { return 'from child' } } } }) new Vue({ el: '#app', data: { message: 'from parent' }, components: { Child } })

ログイン後にコピー

2. $emit

正式な導入では、現在のインスタンスでイベントをトリガーし、追加のパラメーターがリスナーコールバックに渡されます。

  
 let MyButton = Vue.extend({ template: '', data () { return { greeting: 'vue.js!' } }, methods: { triggerClick () { this.$emit('greet', this.greeting) } } }) new Vue({ el: '#app', components: { MyButton }, methods: { sayHi (val) { alert('Hi, ' + val) // 'Hi, vue.js!' } } })

ログイン後にコピー

3. .sync 修飾子

は、vue1.x の双方向バインディング関数として存在していました。つまり、子コンポーネントは、次の値を変更できます。親コンポーネント。一方向のデータフローの設計概念に違反したため、vue2.x では削除されましたが、この .sync 修飾子は vue 2.3.0 以降で再導入されました。ただし、これはコンパイル時の糖衣構文としてのみ存在します。これは、親コンポーネントのプロパティを自動的に更新する v-on リスナーとして拡張されています。

場合によっては、プロップに対して「双方向バインディング」を実行する必要があるかもしれません。残念ながら、真の双方向バインディングでは、親コンポーネントにも子コンポーネントにも明らかな変更源がなくても、子コンポーネントが親コンポーネントを変更できるため、メンテナンスの問題が発生します。

構文シュガーは次の形式で記述されます

ログイン後にコピー

したがって、.sync 構文シュガーを使用して次の形式に短縮できます

ログイン後にコピー

したがって、2 つを実現する方法は次のとおりです。サブコンポーネントの変更などのウェイバインディング。コンポーネントテキストボックスの値も親コンポーネントの値を変更します。コードは次のとおりです。

  {{ userName }} 
 let Login = Vue.extend({ template: `  姓名:  
 `, props: ['name'], data () { return { text: '' } }, watch: { text (newVal) { this.$emit('update:name', newVal) } } }) new Vue({ el: '#app', data: { userName: '' }, components: { Login } })

ログイン後にコピー

コードには 1 つの文のみがあります:

this.$emit('update:name', newVal)

ログイン後にコピー

正式な構文は次のとおりです: update:myPropName ここで、myPropName は更新されるプロパティを表します。もちろん、.sync 構文シュガーを使用せず、上記の .$emit を使用する場合でも、同じ効果を達成できます。

#4、$attrs および $listeners

公式 Web サイトの $attrs のサポート説明は次のとおりです。

親スコープ内の props として認識 (および取得) されないプロパティバインディング (クラスとスタイルを除く) が含まれています。コンポーネントが props を宣言していない場合、すべての親スコープバインディング (クラスとスタイルを除く) がここに含まれ、内部コンポーネントは v-bind="$attrs" 経由で渡すことができます。これは高レベルのコンポーネントを作成するときに非常に便利です。

公式 Web サイトでは、$listeners について次のように説明されています。

親スコープに v-on イベントリスナーが含まれます (.native 修飾子なし)。 v-on="$listeners" を介して内部コンポーネントに渡すことができます。これは、より高いレベルのコンポーネントを作成するときに非常に役立ちます。

$attrs 属性と $listeners 属性は 2 つのストレージボックスに似ています。1 つは属性の保存を担当し、もう 1 つはイベントの保存を担当します。どちらもデータをオブジェクトの形式で保存します。

ログイン後にコピー

let Child = Vue.extend({ template: '{{ foo }}
', props: ['foo'], created () { console.log(this.$attrs, this.$listeners) // -> {bar: "parent bar"} // -> {two: fn} // 这里我们访问父组件中的 `triggerTwo` 方法 this.$listeners.two() // -> 'two' } }) new Vue({ el: '#app', data: { foo: 'parent foo', bar: 'parent bar' }, components: { Child }, methods: { triggerOne () { alert('one') }, triggerTwo () { alert('two') } } })

ログイン後にコピー

ご覧のとおり、$attrs と $listeners を介してデータを渡し、必要に応じて呼び出して処理することが非常に便利です。もちろん、v-on="$listeners" を通じてレベルごとに渡すこともでき、子孫は無限になります。

5、プライベートとインジェクト

provide / inject の公式の説明を見てみましょう:

Provide と inject は主にハイエンドです。プラグイン/コンポーネントライブラリは使用例を提供します。アプリケーションコード内で直接使用することはお勧めできません。また、コンポーネント階層がどれほど深くても、祖先コンポーネントがそのすべての子孫に依存関係を注入できるようにするには、このオプションのペアを一緒に使用する必要があります。このオプションは、上流と下流の関係が確立された時点から常に有効になります。

  
 let Son = Vue.extend({ template: 'son
', inject: { house: { default: '没房' }, car: { default: '没车' }, money: { // 长大工作了虽然有点钱 // 仅供生活费，需要向父母要 default: '￥4500' } }, created () { console.log(this.house, this.car, this.money) // -> '房子', '车子', '￥10000' } }) new Vue({ el: '#app', provide: { house: '房子', car: '车子', money: '￥10000' }, components: { Son } })

ログイン後にコピー

その他の例については、このメソッドを多数使用する element-ui ソースコードを参照してください。