Vue親子コンポーネント間のデータ通信--props,$emit
1737 ワード
まず親コンポーネントの中のデータが子コンポーネントに伝達されるここではprops,propsは支持物の意味があり,橋渡しと理解できる.propsはセルフコンポーネントに書きます.
サブコンポーネントを定義し、コンポーネントにpropsを登録します.
親コンポーネントで、子コンポーネントを導入し、子コンポーネントに必要な値を入力します.
注意:この方法では、親から子にのみ渡され、子コンポーネントは親コンポーネント内のdataを更新できません.
次に、サブコンポーネントのデータが親コンポーネントに伝達されます.ここで$emitを使用します.emitには送信の意味があります.これは理解にかたくありません.
tips: App.vue親コンポーネント/Hello.vueサブアセンブリ
親コンポーネントの内容
サブアセンブリの内容
$emitは、親を呼び出す方法で子から親へのデータ転送を完了します.
サブコンポーネントを定義し、コンポーネントにpropsを登録します.
{{message}}( )
export default {
props: {
message: String // <br> }
}
親コンポーネントで、子コンポーネントを導入し、子コンポーネントに必要な値を入力します.
import child from './child' // child
export default {
data() {
return {
parentMsg: 'a message from parent' // data
}
},
components: {
child
}
}
注意:この方法では、親から子にのみ渡され、子コンポーネントは親コンポーネント内のdataを更新できません.
次に、サブコンポーネントのデータが親コンポーネントに伝達されます.ここで$emitを使用します.emitには送信の意味があります.これは理解にかたくありません.
tips: App.vue親コンポーネント/Hello.vueサブアセンブリ
親コンポーネントの内容
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue
alert(evtValue)
}
}
}
サブアセンブリの内容
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', ' ')
}
}
}
$emitは、親を呼び出す方法で子から親へのデータ転送を完了します.