Vue親子コンポーネントの値伝達

**
親コンポーネント:Father.vue方向サブアセンブリ:Son.vue伝値
**
1.親コンポーネント(Father.vue)に子コンポーネント**を導入する
コンポーネントの使用順序について:コンポーネントを先に導入します.コンポーネントを再登録し、最後にコンポーネントを使用

html部分は、導入されたサブアセンブリ

を用いる.

<div >
	<el-button @click="dataToSon">  el-button>
	
	<son  :data='sonData'/>
div>

javascriptセクション:サブコンポーネントの導入、登録コンポーネント

//     
import son from './Son.vue'


//     
components: {
     
	son
}

//           
data() {
     
	return {
     
		sonData: '         '
	}
}

//     ，    、          ，        
dataToSon() {
     
	this.sonData = '          '
	console.log('     ：', this.sonData)
}

2.親コンポーネントからの値を子コンポーネント(Son.vue)で受け取る

サブアセンブリでpropsで受信値を宣言する予想タイプは、文字列、配列、関数など

であってもよい.

propsバインド値

を使用

props: {
     
	sonData: {
     
		type: String,
		required: true
	}
}

mounted() {
     
	console.log('        ：', this.sonData)
}

**
子コンポーネントから親コンポーネントへの値の転送
**

第1ステップ:サブコンポーネントsonDataは、親コンポーネントにおけるサブコンポーネントの値伝達を受信する関数

である.

 console.log('        ', sonDataToFather)
 this.$emit('sonData', sonDataToFather)

ステップ2:親コンポーネント受信親コンポーネントページで、サブコンポーネントを使用する場所に関数@sonData="getSonData"

を書き込みます.

<son  @sonData="getSonData"/>

getSonData(data) {
     
	console.log('         ', data)
}