VUE脚手架的作用域插槽实现element table展示及vuex数据共享

1.作用域插槽实现element table展示：

App.vue：

components文件下：

DemoTwo.vue:

效果：

2.vuex数据共享：

App.vue文件：

store下index.js文件：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化。 */

/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,

   Vuex将会成为自然而然的选择 */

/* 导出一个Vuex实例化对象 */

export default new Vuex.Store({

  /* state是用来存储组件中的数据的 */

  state: {

    msg:'我是组件共享的数据',

    num:0

  },

  /* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */

  getters: {

  },

  /* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */

  mutations: {

    /* mutations 的方法最好大写,为了和actions方法做区分 */

    ADDNUM:function(state){

    console.log('ADDNUM',state);

    state.num++

    },

    DELNUM:function(state){

    console.log('DELDNUM',state);

    state.num--

    },

  },

  /* actions是用来调后台接口的并commit提交一个mutations */

  actions: {

    /* actions里面的方法小写为了区分mutations里面的方法 */

  },

  /* 可以使用modules把vuex分模块 */

  modules: {

  }

})

components下

CompA.vue文件：

CompB.vue文件：

效果：