vueコンポーネント化(二)-親子コンポーネントに関する通信
20011 ワード
親から子への通信
サブコンポーネントは、親コンポーネントまたはvueインスタンスのデータを参照できません.しかし、開発では、あるページでサーバから多くのデータを要求するなど、上層部から下層部にデータを渡す必要があることがよくあります.一部のデータは、ページ全体の大きなコンポーネントではなく、次のサブコンポーネントが必要です.この場合、サブコンポーネントにネットワークリクエストを再送信させるのではなく、大きなコンポーネント(親コンポーネント)にデータを小さなコンポーネント(サブコンポーネント)に直接渡すようにします.
親子コンポーネント間の通信はどのように行いますか?
①propsによるサブアセンブリへのデータ転送
②イベントによる親コンポーネントへのメッセージの送信
実証により、サブコンポーネントでは、親コンポーネントのdata上のデータとmethodsにデフォルトでアクセスできない方法が発見されました.
サブコンポーネントのdataデータは、親コンポーネントを介して渡されるのではなく、サブコンポーネント自体がプライベートです.
コンポーネント内のすべてのpropsのデータは、親コンポーネントを介してサブコンポーネントに渡されます.
子から親コンポーネントへの通信
propsは、親コンポーネントが子コンポーネントにデータを渡すために使用され、比較的一般的な子コンポーネントが親コンポーネントにデータまたはイベントを渡すために使用されます.
この場合、カスタムイベントを使用して完了する必要があります.
サブコンポーネントが親コンポーネントにデータを渡す必要がある場合は、カスタムイベントが使用されます.以前に学習したv-onは、DOMイベントの傍受だけでなく、コンポーネント間のカスタムイベントにも使用できます.
プロセス:①サブアセンブリで**$emit()でイベントをトリガーする②親アセンブリでv-onで**サブアセンブリイベントをリスニングする
サブコンポーネントは、親コンポーネントまたはvueインスタンスのデータを参照できません.しかし、開発では、あるページでサーバから多くのデータを要求するなど、上層部から下層部にデータを渡す必要があることがよくあります.一部のデータは、ページ全体の大きなコンポーネントではなく、次のサブコンポーネントが必要です.この場合、サブコンポーネントにネットワークリクエストを再送信させるのではなく、大きなコンポーネント(親コンポーネント)にデータを小さなコンポーネント(サブコンポーネント)に直接渡すようにします.
親子コンポーネント間の通信はどのように行いますか?
①propsによるサブアセンブリへのデータ転送
②イベントによる親コンポーネントへのメッセージの送信
<body>
<div id="app">
<cpn :cmovies="movies" :cmessage="message">cpn>
<cpn :cmovies="movies">cpn>
<cpn :cmessage="message">cpn>
div>
body>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}
li>
ul>
<h2>{{cmessage}}h2>
div>
template>
<script src="../js/vue.js">script>
<script>
//
const cpn = {
template:'#cpn', //
// 、 ,
// props:['cmovies','cmessage'],
// 、
props:{
//1
// cmovies:Array,
// cmessage:String,
//2.
cmovies:{
type:Array,
// ， ，
default(){
return []
},
// required:true,
//required true v-bind
},
cmessage:{
type:String,
default:'aaaaa',
// required:true,
//required true v-bind
}
},
data(){
return {}
},
methods:{}
}
// vue ，
const app = new Vue({
el:'#app',
data:{
movies:['111','222','333'],
message:' '
},
components:{
'cpn':cpn
}
})
script>
実証により、サブコンポーネントでは、親コンポーネントのdata上のデータとmethodsにデフォルトでアクセスできない方法が発見されました.
サブコンポーネントのdataデータは、親コンポーネントを介して渡されるのではなく、サブコンポーネント自体がプライベートです.
コンポーネント内のすべてのpropsのデータは、親コンポーネントを介してサブコンポーネントに渡されます.
子から親コンポーネントへの通信
propsは、親コンポーネントが子コンポーネントにデータを渡すために使用され、比較的一般的な子コンポーネントが親コンポーネントにデータまたはイベントを渡すために使用されます.
この場合、カスタムイベントを使用して完了する必要があります.
サブコンポーネントが親コンポーネントにデータを渡す必要がある場合は、カスタムイベントが使用されます.以前に学習したv-onは、DOMイベントの傍受だけでなく、コンポーネント間のカスタムイベントにも使用できます.
プロセス:①サブアセンブリで**$emit()でイベントをトリガーする②親アセンブリでv-onで**サブアセンブリイベントをリスニングする
<body>
<div id="app">
<cpn @itemclick="cpnclick">cpn>
div>
body>
<template id="cpn">
<div>
<button v-for="item in categories" @click='btnclick(item)'>{{item.name}}button>
div>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template:'#cpn',
data(){
return {
categories:[
{id:'aaa',name:' '},
{id:'bbb',name:' '},
{id:'ccc',name:' '},
{id:'ddd',name:' '},
]
}
},
methods:{
btnclick(item){
// ( / )
this.$emit('itemclick',item)
}
}
}
const app = new Vue({
el:'#app',
data:{
},
components:{
'cpn':cpn
},
methods:{
cpnclick(item){ //
console.log(item.name);//
}
}
})
script>