ホームページ >ウェブフロントエンド >Vue.js >vuejsで親子通信を設定する方法
vuejsで親子通信を設定する方法
- 青灯夜游オリジナル
- 2021-09-06 15:26:122171ブラウズ
vuejs で親子通信を設定する方法: 1. 親コンポーネントは props を使用して子コンポーネントにデータを渡します; 2. 子コンポーネントは「$emit」を通じて親コンポーネントにメッセージを送信します; 3 . ".sync" 糖衣構文を使用する; 4. "$attrs" と "$listeners" を使用する; 5. private と inject を使用する。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
Vue には、親コンポーネントと子コンポーネントの間で次の通信メソッドがあります:
props
- ## $emit -- コンポーネントのカプセル化に一般的に使用されます
- .sync -- 糖衣構文
- $attrs および $listeners -- コンポーネントのカプセル化に使用されます多数の
- privideとinject -- 高次コンポーネント
#1、 props
これは日常の開発でよく使われます。簡単に言うと、props を介して子コンポーネントにデータを渡すことができます。水道管のように、親コンポーネントのデータが上から下に流れます。は、流れに逆らって流れることはできません。これは、Vue の設計導入における単一のデータ フローでもあります。<div id="app">
<child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
template: '<h2>{{ content }}</h2>',
props: {
content: {
type: String,
default: () => { return 'from child' }
}
}
})
new Vue({
el: '#app',
data: {
message: 'from parent'
},
components: {
Child
}
})
2. $emit
正式な導入では、現在のインスタンスでイベントをトリガーし、追加のパラメーターがリスナー コールバックに渡されます。<div id="app">
<my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
template: '<button @click="triggerClick">click</button>',
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 リスナーとして拡張されています。 場合によっては、プロップに対して「双方向バインディング」を実行する必要があるかもしれません。残念ながら、真の双方向バインディングでは、親コンポーネントにも子コンポーネントにも明らかな変更源がなくても、子コンポーネントが親コンポーネントを変更できるため、メンテナンスの問題が発生します。 構文シュガーは次の形式で記述されます3aad4a5f8d6d21b85f13f5b7d90449ce d093019edc1fd049b9381d54424ed8e7したがって、.sync 構文シュガーを使用して次の形式に短縮できます
<text-document v-bind:title.sync="doc.title"></text-document>したがって、2 つを実現する方法は次のとおりです。サブコンポーネントの変更などのウェイ バインディング。コンポーネント テキスト ボックスの値も親コンポーネントの値を変更します。コードは次のとおりです。
<div id="app">
<login :name.sync="userName"></login> {{ userName }}
</div>
let Login = Vue.extend({
template: `
<div class="input-group">
<label>姓名:</label>
<input v-model="text">
</div>
`,
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 つはイベントの保存を担当します。どちらもデータをオブジェクトの形式で保存します。
<div id="app">
<child
:foo="foo"
:bar="bar"
@one.native="triggerOne"
@two="triggerTwo">
</child>
</div>let Child = Vue.extend({
template: '<h2>{{ foo }}</h2>',
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 は主にハイエンドです。プラグイン/コンポーネント ライブラリは使用例を提供します。アプリケーション コード内で直接使用することはお勧めできません。また、コンポーネント階層がどれほど深くても、祖先コンポーネントがそのすべての子孫に依存関係を注入できるようにするには、このオプションのペアを一緒に使用する必要があります。このオプションは、上流と下流の関係が確立された時点から常に有効になります。
ab509c080ec9f7ec77efedb1cdcd4bed
1207412ca14c1d8bb1c5d564f723d29198f9e0de16d4632c0e387ffd4bb1294d
16b28748ea4df4d9c2150843fecfba68
let Son = Vue.extend({
template: 'c1a436a314ed609750bd7c7d319db4dason2e9b454fa8428549ca2e64dfac4625cd',
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 ソース コードを参照してください。
関連する推奨事項:「
vue.js チュートリアル以上がvuejsで親子通信を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。