插槽与vuex

通过作用域插槽实现element table的 展示 以及 点击查看显示对应的内容

app。vue

<template>
  <div id="app">
    <new-cop>
       <template v-slot="scope">
        <a @click="handler(scope.row)" href="javascript:;">查看</a>
      </template>
    </new-cop>
  </div>
</template>
  <script>
  import NewCop from './components/NewCop.vue'
  export default {
    name:'App',
    components:{
      NewCop
    },
    methods:{
      handler(row){
        console.log(row)
      }
    }
  }
  </script>

子组件：

<template>
  <div>
   <ul>
    <li v-for="(v,i) in list" :key="i">
        {{v.name}}--{{v.age}}
        <slot :row="v"></slot>
    </li>
   </ul>
  </div>
</template>

<script>
export default {    
    name:'NewCop',
    data() {
        return {
            msg:'我是插槽1',
            str:'我是插槽2',
            list:[{
                name:'张三',
                age:30
            },
            {
                name:'李四',
                age:31
            },
            {
                name:'王二',
                age:33
            }
            ]
        }
    },
}
</script>

vuex简单运用

index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    msg:'组件共享的数据',
    num:0
  },
  getters: {
  },
  mutations: {
    ADDNUM:function(state){
      state.num++
    },
    DELNUM:function(state){
      state.num--
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue：

<template>
  <div id="app">
    <h1>{{$store.state.num}}</h1>
    <comp-a></comp-a>
    <comp-b></comp-b>
    <button @click="add">加一</button>
    <button @click="del">减一</button>
  </div>
</template>
<script>
import CompA from './components/CompA.vue'
import CompB from './components/CompB.vue'
export default {
  name:'App',
  components:{
    CompA,
    CompB
  },
  methods:{
    add(){
      this.$store.commit('ADDNUM') 
    },
    del(){
        this.$store.commit('DELNUM') 
    }
  }
}
</script>