Vue组件的运用浅析-父子组件之间的通信

1.组件使用的三个步骤：

1. 创建组件构造器：调用Vue.extend()方法创建组件构造器；
2. 注册组件：调用Vue.component()方法注册组件；
3. 使用组件：在Vue实例的作用范围内使用组件。

实例如下：

（1）局部组件和全局组件的简单案例

（2）父组件和子组件的简单案例：

2.注册组件的语法糖写法：

（1）定义全局组件的方法：

（2）定义局部组件的方法：

语法糖写法如下（省略extend方法，将对应的组件直接写到component方法中）：

3.组件data的保存（必须使用函数data()）。

由于组件的复用性，使用函数方法目的是为了防止多个相同类型的组件对象之间共用一个data，产生污染。而函数由于作用域的限制恰巧可以防止各个组件之前产生数据data的干扰。

4.父子组件之间的通信方式：

（1）父组件通过props（可传数组或对象）向子组件传递数据；

Step1：在props中定义变量数组/对象，用于指向父组件中的data

注意：例如props中命名的wballstars，若要用驼峰命名法动态绑定父组件中的data，时，必须写成w-ball-stars，用-连接的语法（如图，若定义为wBallStars,动态绑定时用-进行大小写区分）。

Step2：在html文件使用组件的地方动态绑定父组件中的data

补充：props（可传数组或对象），现在开发多用对象

传递数组：

传递对象：

（2）子组件通过事件向父组件发送信息

Step1：子组件通过methods方法创建并且发射一个事件（包含事件名称和传递的信息）给父组件

Step2：父组件通过对事件的监听调用父组件的methods方法，完成对应的功能

5.组件之间的访问：使用children或ref进行访问。

案例：

（1）使用children（此案例的children数组有3个数据）：

父组件的methods中的代码：

（2）使用ref

父组件的methods中的代码：

6.子组件对父组件访问：parent或者root

但要注意两者区别（parent是访问上一级组件或vue实例，root是访问根组件，即vue实例）