値を渡すメソッドには、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
##props と $emit
親コンポーネントは prop を介して子コンポーネントにデータを渡し、子コンポーネントはイベントをトリガーする $emit を介して親コンポーネントにデータを渡します。 ##上の例では、親コンポーネントparentと子コンポーネントchildが存在します。 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) } } })ログイン後にコピー
サブコンポーネントは、props を通じて関連するメッセージ データを取得し、最後に this.$emit
Vue.component('C',{
template:`
<div>
<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
`,
methods:{
passCData(val){
//触发父组件A中的事件
this.$emit('getCData',val)
}
}
})
Vue.component('B',{
data(){
return {
mymessage:this.message
}
},
template:`
<div>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
<!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
`,
props:['message'],//得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件
this.$emit('getChildData',val)
}
}
})
Vue.component('A',{
template:`
<div>
<p>this is parent compoent!</p>
<B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
</div>
`,
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:` <p>
<p>this is brother1 compoent!</p>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
</p> `,
methods:{
passData(val){ //触发全局事件globalEvent
bus.$emit('globalEvent',val)
}
}
})
Vue.component('brother2',{
template:` <p>
<p>this is brother2 compoent!</p>
<p>brother1传递过来的数据：{{brothermessage}}</p>
</p> `,
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:` <p>
<brother1></brother1>
<brother2></brother2>
</p> `
})ログイン後にコピー
provide と inject
は、Vue.js の 2.2.0
親コンポーネントのプロバイダーを通じて変数を提供し、子コンポーネントの inject を通じて変数を注入します。サブコンポーネントの深さに関係なく、inject が呼び出される限り、プロバイダー内のデータを注入できます。現在の親コンポーネントの prop 属性からのみデータを取得することに限定されるのではなく、子コンポーネントは親コンポーネントのライフサイクル内であればそれを呼び出すことができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>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:` <p>
<input type="text" v-model="mymessage" @change="changeValue">
</p> })
Vue.component('parent',{
template:` <p>
<p>this is parent compoent!</p>
<p>{{message}}</p>
<child v-model="message"></child>
</p> `,
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` <p>
<parent></parent>
</p> `
}) の値を自動的に変更します。コンポーネント内で実行できます。子コンポーネント $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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
