vueでよく使用される親子コンポーネントの値伝達

635 ワード

ペアレントコンポーネントの値伝達
 
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相互転送を実現