vue 爬坑之路 （三）组件化应用

vue 爬坑之路 （三）组件化应用

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

一、如何使用组件

1、创建组件，建立好组件的模板。如下图：

2、需要引用组件的地方使用import引用文件。如下图：

3、在components里面注册组件。如下图：

4、使用组件。如下图：

二、组件之间的传值

1、父传子

1.在父组件中，给引用的子组件绑定变量值。如下图：

2、子组件使用props接收父组件传来的值。如下图：

2、子传父

1、在子组件中定义一个函数，使用$emit进行传值。如下图：
将值绑定在 “ zdyhs ” 上传递过去

2、在父组件中绑定自定义事件 “ zdyhs ”。如下图：

三、兄弟之间传值

四、Vuex

Vuex相当于一个仓库（容器），包含着你的应用中大部分的状态 (state)
1、如果你没有安装vuex，则利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。
npm install vuex --save

2、新建一个文件夹（以store为例），并在文件夹下新建文件（以store.js为例），文件中引入我们的vue和vuex。
import Vue from ‘vue’
import Vuex from ‘vuex’

3、使用我们vuex，引入之后用Vue.use进行引用。
Vue.use(Vuex)

4、使用export default 封装代码，让外部可以引用。

以上四步如下图所示：

5、在main.js 中引入新建的store.js文件
import store from ‘./store’

6、在实例化 Vue对象时加入 store 对象

以上两步如下图所示：

通过以上几步的操作，vuex就算引用成功了，接下来我们就可以尽情的操作了
先来实现一个demo吧！！
使用之前，先来解释一下vuex中的五个核心属性的作用！重点
state => 存储基本数据，如下图所示：


效果图如下：

getters => 从state基本数据派生出的数据 （在Store仓库里，state就是用来存放数据的，若是对数据进行处理输出，比如数据要过滤，要对数据进行计算操作，这时就要使用到getters来实现组件之间重复使用状态数据。）
比如：我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.
如下图所示：


效果图如下：

mutations => Store中更改state数据状态的唯一方法。
Vuex提供了commit方法来修改状态
两种方式

1.代码如下图

效果图如下：

2.代码如下图

效果图如下：

actions => 数据请求，返回的数据通过mutations方法修改state中的值

modules => 模块化Vuex，允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters