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)
}

**

子组件向父组件传值

**

• 第一步：子组件
  sonData是在父组件中接收子组件传值的函数

 console.log('传递给父组件的值', sonDataToFather)
 this.$emit('sonData', sonDataToFather)

• 第二步：父组件接收
  父组件页面中，在使用子组件的地方写函数@sonData=“getSonData”

<son  @sonData="getSonData"/>

getSonData(data) {
     
	console.log('从子组件接收的数据', data)
}