vue组件通信（一）--父传子--详解

vue组件通信（ 1 ）–父传子–详解

vue组件之间的通信，我相信大家都不陌生，只要是用过vue的前端都知道有几种方式：

1.父传子：子组件用props接收

2.子传父：用的$emit方法

3.非父子间：可以用bus（中央事件总线），vuex（状态管理）

今天我就和大家一起讨论一下组件之间父传子通信的详细步骤：

第一步：在父组件中引入子组件，并注册子组件

import showCharts from './charts/showCharts.vue';
export default {
	components: {showCharts};
	data(){
		//数据
	}
}

第二步：将注册的子组件放在父组件中应放的位置，并用v-on绑定需要传入的子组件的值

<show-charts :riskData = 'riskData'></show_charts>

第三步：在子组件中用props接收传来的值，type是自定义类型，default是添加默认值

props:{
	riskData:{
		type:Array,
		default:''
	}
}

我们可以在created里面 console.log(this.riskData) 在控制台打印，看传过来的数据是否正确

created(){
	console.log(this.riskData)
}

通过父组件传来的值，可以在html标签上直接使用，不需要加this。

希望这篇文章对大家有所帮助。