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