三、组件与数据交互

一、组件基础

1、单文件组件

第一步：引入组件 import ComponentTest from './components/ComponentTest.vue'
第二步：挂载组件 components: {ComponentTest }
第三步：显示组件 

二、Props组件交互(向下传递)

1、Props组件交互

三、自定义事件组件交互(向上传递)

1、自定义事件组件交互

四、组件生命周期

1、组件生命周期

创建：brforeCreate、created
渲染：brforeMount、mounted
更新：brforeUpdate、updated
卸载：brforeUnmount、unmounted

五、vuex（全局数据管理）

1、创建vuex项目

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection, and  to 
proceed)
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 ( ) Router
>(*) Vuex	//vuex选项
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

2、使用方法

（1）State（存储数据）

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'

export default createStore({
  // 所有数据都存放在这里
  state: {
    counter: 100
  }
})

方式一：

方式二

（2）Getter（获取数据）

对vuex中的数据进行过滤

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'

export default createStore({
  // 所有数据都存放在这里
  state: {
    counter: 100
  },
  getters: {
    getCounter(state) {
      return state.counter > 0 ? state.counter : "counter的值小于0"
    }
  },
  mutations: {
  },
  actions: {
  }
})

方式一

方式二

（3）Mutation（提交修改数据）

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'

export default createStore({
  // 所有数据都存放在这里
  state: {
    counter: 100
  },
  getters: {
    getCounter(state) {
      return state.counter > 0 ? state.counter : "counter数据异常"
    }
  },
  mutations: {
    addCounter(state, num) {
      state.counter += num;
    }
  },
  actions: {
  }
})

方法一

方法二

（4）Action

action提交给mutation，包含异步操作

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'

export default createStore({
  // 所有数据都存放在这里
  state: {
    counter: 100
  },
  getters: {
    getCounter(state) {
      return state.counter > 0 ? state.counter : "counter数据异常"
    }
  },
  mutations: {
    addCounter(state, num) {
      state.counter += num;
    }
  },
  actions: { //为异步操作准备
    asyncAddCounter({ commit }) {
      commit("addCounter", 30);
    }
  }
})

方法一

方式二