作用域插槽
子组件插槽通过 :msgv='msg' 向scope传值
<template>
<div>
<slot name="one" :msgv='msg'></slot>
<h1>DemoOne</h1>
<slot name="two" :strv='str'></slot>
</div>
</template>
<DemoOne>
在vue2.6之前使用slot-scope
父组件使用slot-scope接收插槽传过来的值
slot-scope的方式 可以使用template也可以直接写在元素上
<h2 slot="one" slot-scope="scope">我是插槽1--{{ scope.msgv }}</h2>
在vue2.6之后出现了v-slot 在vue3就必须使用v-slot, v-slot只能写在template上
<!-- 使用v-slot的方式，
1.必须使用在template里
2.v-slot:插槽名='scope'，取代了slot=''
匿名插槽插槽名不写 -->
<template v-slot:two="scope">
<h2>我是插槽2--{{ scope.strv }}</h2>
</template>
</DemoOne>
父组件向子组件传值 ，使用:list='list'的方式
<DemoTwo :list='list'>
<template slot-scope="scope"> 匿名插槽
插槽接收到下面传来值，放入点击函数handler里
<a href="javascript:;" @click="handler(scope.row)">查看详情</a>
</template>
</DemoTwo>
子组件通过props:['list']接收父组件传来的值
<template>
<div>
<h1>我是DemoTwo</h1>
<ul>
<li v-for="(v,i) in list" :key="i">{{v.name}}--{{v.age}}
插槽把每一项的值v通过:row给escope
<slot :row='v'></slot>
</li>
</ul>
</div>
</template>
<script>
Vuex
在store的index.js文件中
/* 吧vuex当作一个方法，用vue.use来引入 */
Vue.use(Vuex)
/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 */
export default new Vuex.Store({
state: {/* 存储组件中数据 */
msg: '组件共享的数据',num:0
},
getters: {/* 计算组件中数据，可以对其二次加工，类似computed */
},
mutations: {/* 修改state中的值(要想留下记录必须使用mutations修改) */
方法名用大写
ADDNUM:function(state){
console.log('ADDNUM',state);
state.num++
},
DELNUM:function(state){
console.log("DELNUM",state);
state.num--
}
},
actions: {/* 调后台接口并commit提交一个mutations
里面的方法用小写为了区分mutations里面的方法*/
},
modules: {/* 可以使用modules把vuex分模块 */
}
})
组件中可以通过$store.state.数据名获取state中的数据,并且通过 this.$store.commit('方法名')来触发 mutations中的方法
<h1>主页--{{$store.state.msg}}--{{$store.state.num}}</h1>
<button @click="add">加1</button> |
<button @click="del">减1</button>
methods:{
add(){
this.$store.commit('ADDNUM')
},
del(){
this.$store.commit('DELNUM')
}
}
