ホームページ >ウェブフロントエンド >Vue.js >Vueで値を渡す8つの方法とは何ですか
Vueで値を渡す8つの方法とは何ですか
- 醉折花枝作酒筹オリジナル
- 2021-04-27 17:35:0713747ブラウズ
値を渡すメソッドには、props と "$emit"、"$attrs" と "$listeners"、セントラル イベント バス、v-model、provide と inject、"$parent" と "$children" が含まれます。 "、vuex、localStorage/セッション。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
vue では、コンポーネント間のメッセージングが非常に重要です。コンポーネント間のメッセージングの一般的な方法を以下にまとめます。
props と $emit (一般的に使用される)
$attrs と $listeners
Centralイベント バス (非親子コンポーネント間通信)
v-model
- ##provide および inject
- $parent と $children
- vuex
##props と $emit
親コンポーネントは prop を介して子コンポーネントにデータを渡し、子コンポーネントはイベントをトリガーする $emit を介して親コンポーネントにデータを渡します。 ##Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div> `, props:['message'],//设置props属性值，得到父组件传递过来的数据 methods:{ passData(val){ //触发父组件中的事件，向父组件传值 this.$emit('getChildData',val) } } }) Vue.component('parent',{ template:` <div> <p>this is parent compoent!</p> <child :message="message" v-on:getChildData="getChildData"></child> </div> `, data(){ return { message:'hello' } }, methods:{ //执行子组件触发的事件 getChildData(val){ console.log(val) } } })上の例では、親コンポーネントparentと子コンポーネントchildが存在します。
サブコンポーネントは、props を通じて関連するメッセージ データを取得し、最後に this.$emit
- #$attrs および $listeners# を通じて getChildData イベントをトリガーします。
Vue.component('C',{
template:`
dc6dce4a544fdca2df29d5ac0ea9906b
7d642c02fff9fdf1e7a3b0ccd8651dae 16b28748ea4df4d9c2150843fecfba68
`,
methods:{
passCData(val){
//触发父组件A中的事件
this.$emit('getCData',val)
}
}
})
Vue.component('B',{
data(){
return {
mymessage:this.message
}
},
template:`
dc6dce4a544fdca2df29d5ac0ea9906b
7fd7f75d01cda5f402cb25a0a7de995b
086635eb7aaa93b3bc42be25ba16f2cd
d4ef16d70a197139b9a0445162e00bb6
2b4f3405cb593d7dabb61895b5e4f0275f6acab10c476fc264ba16ac4aa7415c
16b28748ea4df4d9c2150843fecfba68
`,
props:['message'],//得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件
this.$emit('getChildData',val)
}
}
})
Vue.component('A',{
template:`
dc6dce4a544fdca2df29d5ac0ea9906b
e388a4556c0f65e1904146cc1a846beethis is parent compoent!94b3e26ee717c64999d7867364b1b4a3
e2af931dfa4ed32474136138c8cc6ea341908b66e4bc50a75b443e0dfafd01f9
16b28748ea4df4d9c2150843fecfba68
`,
data(){
return {
message:'hello',
messagec:'hello c' //传递给c组件的数据
}
},
methods:{
getChildData(val){
console.log('这是来自B组件的数据')
},
//执行C子组件触发的事件
getCData(val){
console.log("这是来自C组件的数据："+val)
}
}
})
セントラル イベント バス
上記の 2 つのメソッドは、親コンポーネントと子コンポーネント間のデータ転送を処理します。2 つのコンポーネントが親コンポーネントにない場合はどうなるでしょうか。子供関係??この場合、中央イベント バスを使用できます。新しい Vue イベント バス オブジェクトを作成し、bus.$emit を通じてイベントをトリガーすると、bus.$on はトリガーされたイベントをリッスンします。 Vue.component('brother1',{
data(){ return {
mymessage:'hello brother1'
}
},
template:` e388a4556c0f65e1904146cc1a846bee
e388a4556c0f65e1904146cc1a846beethis is brother1 compoent!94b3e26ee717c64999d7867364b1b4a3
7fd7f75d01cda5f402cb25a0a7de995b
94b3e26ee717c64999d7867364b1b4a3 `,
methods:{
passData(val){ //触发全局事件globalEvent
bus.$emit('globalEvent',val)
}
}
})
Vue.component('brother2',{
template:` e388a4556c0f65e1904146cc1a846bee
e388a4556c0f65e1904146cc1a846beethis is brother2 compoent!94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beebrother1传递过来的数据：{{brothermessage}}94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3 `,
data(){ return {
mymessage:'hello brother2',
brothermessage:''
}
},
mounted(){ //绑定全局事件globalEvent
bus.$on('globalEvent',(val)=>{ this.brothermessage=val;
})
}
}) //中央事件总线
var bus=new Vue(); var app=new Vue({
el:'#app',
template:` e388a4556c0f65e1904146cc1a846bee
db8e0981216ffea9e11695fcc5f3d159422ba0722828b812771cb3535114ead2
16c7ea7f21a2f1d37ba1ce836c6f09ccd9f59e38b643491a2fad5c23f0d6a95e
94b3e26ee717c64999d7867364b1b4a3 `
})
provide と inject
は、Vue.js の 2.2.0
親コンポーネントのプロバイダーを通じて変数を提供し、子コンポーネントの inject を通じて変数を注入します。サブコンポーネントの深さに関係なく、inject が呼び出される限り、プロバイダー内のデータを注入できます。現在の親コンポーネントの prop 属性からのみデータを取得することに限定されるのではなく、子コンポーネントは親コンポーネントのライフサイクル内であればそれを呼び出すことができます。 <pre class="brush:js;toolbar:false;">Vue.component(&#39;child&#39;,{
inject:[&#39;for&#39;],//得到父组件传递过来的数据
data(){
return {
mymessage:this.for
}
},
template:`})
Vue.component(&#39;parent&#39;,{
template:`this is parent compoent!`,
provide:{
for:&#39;test&#39;
},
data(){
return {
message:&#39;hello&#39;
}
}
})</pre>v-model
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性 },
data(){ return {
mymessage:this.value
}
},
methods:{
changeValue(){ this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值 }
},
template:` e388a4556c0f65e1904146cc1a846bee
6708e6166751e70f627e757fbdf53cce
94b3e26ee717c64999d7867364b1b4a3 })
Vue.component('parent',{
template:` e388a4556c0f65e1904146cc1a846bee
e388a4556c0f65e1904146cc1a846beethis is parent compoent!94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee{{message}}94b3e26ee717c64999d7867364b1b4a3
2683ad86c93f2ee4c92e7d9b5d7c94a27d4dd9c7239aac360e401efe89cbb393
94b3e26ee717c64999d7867364b1b4a3 `,
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` e388a4556c0f65e1904146cc1a846bee
58652436a08d62d32b90566dafe0913cdb7b8d074c72824ed121864240fe4c81
94b3e26ee717c64999d7867364b1b4a3 `
})
$parent および $children
の値を自動的に変更します。コンポーネント内で実行できます。子コンポーネント $parent を通じて親コンポーネントを直接操作し、親コンポーネントは $children を通じて子コンポーネントを操作します。#Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性 },
data(){ return {
mymessage:this.value
}
},
methods:{
changeValue(){ this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值 }
},
template:` <p>
<input type="text" v-model="mymessage" @change="changeValue">
</p> })
Vue.component('parent',{
template:` <p>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</p> `,
methods:{
changeChildValue(){ this.$children[0].mymessage = 'hello';
}
},
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` <p>
<parent></parent>
</p> `
})
vuex はコンポーネント間のデータ対話を処理します
ビジネス ロジックが複雑で、多くのコンポーネントがパブリック データを同時に処理する必要がある場合、上記の方法はプロジェクトのメンテナンスに役立たない可能性があります。Vuex のアプローチは、これらのパブリック データを抽出することです。 、その後、他のコンポーネントがこの共通データを読み書きできるようになり、分離の目的が達成されます。
この種の通信は比較的単純ですが、データとステータスがわかりにくく、保守が容易ではないという欠点があります。 。 window.localStorage.getItem(key)を通してデータを取得しますGet data
Pass
window.localStorage.setItem(key,value)ストレージデータデータ形式の変換には JSON.parse() / JSON.stringify() の使用に注意してください
localStorage / sessionStorage を vuex と組み合わせて永続的なデータ ストレージを実現し、vuex を使用して問題を解決できますデータとステータスの混乱の問題。 [関連する推奨事項:「
」]
以上がVueで値を渡す8つの方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。