vue作用域插槽和初识vuex

97 阅读1分钟

作用域插槽其实就是带数据的特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。当一个组件需要重复使用时可以用到

子组件
<ul>
        <li v-for="(item,index) in list" :key="index">
          <slot :row='item'></slot>
           {{item.name}}---{{item.age}} </li>
      </ul>
  </div>

<script>
export default {
  data(){
    return {
      list:[{name:"张三",age:"20"},{name:"李四",age:"12"}]
    }
  }
}
</script>
<template slot-scope='scope'>
          <button @click="get(scope.row)">查看</button>
</template>

vuex

#### 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: {

  }

})