vue-cli安装以及脚手架下 组件之间的通信

一、父到子之间的通信(通过props)

1.理解什么是父组件和子组件,如图所示:

vue-cli安装以及脚手架下 组件之间的通信_第1张图片
图1

解释图1:图1中向子组件传的值是一个字符串,当然也可以传父组件data里面的数据,这是记得加“:”

2.如何传值,如图所示

vue-cli安装以及脚手架下 组件之间的通信_第2张图片
图二

二、子到父之间的通信(自定义事件)

1.在子组件的代码:

vue-cli安装以及脚手架下 组件之间的通信_第3张图片
图三

2.父组件的代码:

vue-cli安装以及脚手架下 组件之间的通信_第4张图片
图四

三、子到子之间的通信(新建vue实例)


1.在一个新的js文件中去创建一个vue实例


图五

2.假设two.vue是传送方,one.vue是接受方

那么在送方的代码如图所示:

vue-cli安装以及脚手架下 组件之间的通信_第5张图片
图六

接受方的代码如下:

vue-cli安装以及脚手架下 组件之间的通信_第6张图片
图七

四、脚手架安装代码步骤

vue-cli安装以及脚手架下 组件之间的通信_第7张图片

你可能感兴趣的:(vue-cli安装以及脚手架下 组件之间的通信)