vueでよく使用される親子コンポーネントの値伝達
635 ワード
ペアレントコンポーネントの値伝達
1.親伝子
親コンポーネントvueで、サブコンポーネントに属性を設定
サブコンポーネントでは属性が許容され、propsの属性はdataに似ています.
2.子から父へ
親コンポーネントvueで、サブコンポーネントにイベントをバインド
親コンポーネントにイベントを記述し、値を取得
parentDo(value){
value;
}
サブコンポーネントでイベントをトリガーし、値を送信できます.
this.$emit(“parentDo”,value)
3.親取子
親コンポーネントvueで、サブコンポーネントにrefプロパティを設定する
親コンポーネントは直接入手可能
this.$refs.childName
4.親子で持つ
this.$children/this.$parent
5.vuex相互転送を実現
1.親伝子
親コンポーネントvueで、サブコンポーネントに属性を設定
サブコンポーネントでは属性が許容され、propsの属性はdataに似ています.
props: {
msg: {
type: String,//
required: true, //
default: “123”, //
validator:(value)=> xx //
}
},
2.子から父へ
親コンポーネントvueで、サブコンポーネントにイベントをバインド
親コンポーネントにイベントを記述し、値を取得
parentDo(value){
value;
}
サブコンポーネントでイベントをトリガーし、値を送信できます.
this.$emit(“parentDo”,value)
3.親取子
親コンポーネントvueで、サブコンポーネントにrefプロパティを設定する
親コンポーネントは直接入手可能
this.$refs.childName
4.親子で持つ
this.$children/this.$parent
5.vuex相互転送を実現