Vue - 标准开发方式、组件（全局、局部、props、事件传递）、插槽的使用

  免费查看本文章可前往我的网站：PiQiu

目录

一、Vue

1.1、标准开发方式

1.2、组件的使用

1.2.1、全局组件

1.2.2、局部组件

1.2.3、props 传递静态数据

1.2.4、props 传递动态数据

1.2.5、事件传递

1.2.6、插槽slot

一、Vue

1.1、标准开发方式

Vue 的标准开发方式是 SPA（Single Page Application）：单页面web 应用，也就是收，日后的项目中只有一张页面（index.html）.

为什么要使用 SPA 开发方式？

1. Vue 官方推荐：一个应用中只能存在一个 Vue 实例.
2. 复用：Vue 提供了 Component 组件，不仅减少了 Vue 实例的代码量，还可以实现复用.
3. 解耦合：一个组负责完成项目中的一个功能或者一组功能，实现业务隔离.

1.2、组件的使用

1.2.1、全局组件

全局组件：直接注册到 Vue 根实例组件中.

定义方式：Vue.component(' ', {})  ，第一个参数是组件名，第二个参数是配置对象.

Ps：无论是使用全局组件还是局部组件，都必须在组件 template 中添加唯一根元素.

如下代码：</