# vue 中的插槽的使用 &&vuex 的搭建与使用
# 一、插槽的使用
# 1. 为什么要使用插槽 && 使用场景
vue 的组件化方便了许多开发的场景，但是仅仅是父子兄弟组件的传值依然有不方便的地方，例如相同组件大体结构相同，但需要在某一块使用独立的结构，例如三个组件，第一个需要在那一块放视频，第二个需要放列表，第三个需要放置图片，这个时候，就需要我们插槽的使用
# 2. 例子
# 1. 默认插槽
1
2
3
4
5
6
7
| <template>
<div class="Student">
<h3>{{title}}</h3>
<slot><li v-for="(data,index) in dataLists" :key="index">{{data}}</li></slot>
//以slot标签包裹即表示插槽位置，slot中的内容为默认内容
</div>
</template>
|
1
2
3
4
5
6
7
| <template>
<div id="app">
<Student title='美食' :dataLists='foods'>我是撒比</Student>//以组件标签包裹需要独立的标签
<Student title='学校' :dataLists='schools'></Student>
<Student title='电影' :dataLists='movies'></Student>
</div>
</template>
|
# 2. 具名插槽
1
2
3
4
5
6
7
8
| <template>
<div class="Student">
<h3>{{title}}</h3>
<slot slot="center"><li v-for="(data,index) in dataLists" :key="index">{{data}}</li></slot>
<slot v-slot:footer><li v-for="(data,index) in dataLists" :key="index">{{data}}</li></slot>
</div>
</template>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<div id="app">
<Student title='美食' :dataLists='foods'>我是撒比</Student>//以组件标签包裹需要独立的标签
<Student title='学校' :dataLists='schools'>
<template>
<div>
<div name="center"><div/>
<div name="footer"><div/>
<div/>
<template/>
</Student>
<Student title='电影' :dataLists='movies'></Student>
</div>
</template>
|
# 3. 作用域插槽：主要用于父组件需要使用子组件中的数据时
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <template>
<div class="Student">
<h3>{{title}}</h3>
<slot :games="games"><li v-for="(data,index) in dataLists" :key="index">{{data}}</li></slot>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Student',
data(){
return{
foods:['烧烤','小龙虾','蛋挞'],
schools:['清华','北大','浙大'],
games:['肖生客的救赎','让子弹飞','言叶之庭']
}
},
}
</script>
|
1
2
3
4
5
6
7
8
9
10
11
| <template>
<div id="app">
<Student scope="scopeData">
<template>
<div>
<h4 v-for="s in scopeData" :key="s">{{s}}<h4/>
<div/>
<template/>
</Student>
</div>
</template>
|
# 二、vuex 的搭建与使用
# 1.vuex 的环境搭建
首先下载 vuex 的包，主义 3 版本是 vue2 专用，4 版本是 vue3 专用，所以我们下载时要指定 3 版本
然后在 src 目录下创建 store 文件夹，然后在里面放入 index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| import Vuex from 'vuex'
import Vue from 'vue'
const actions = {
jia(context, value) {
context.commit("JIA", value);
},
}
const mutations = {
JIA(state, value) {
state.sum += value;
}
}
const state = {
sum:0,
}
const getters = {
bigsum(state) {
return state.sum * 10;
}
}
Vue.use(Vuex)
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
|
然后在 main.js 中引入并放入 store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store/index'
Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
render: h => h(App),
store,
}).$mount('#app')
|
至此，store 放入全局，数据可以全局使用了
在组件中使用数据时，需要如下调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <template>
<div class="add">
<h1>页面上的数字是{{sum}}</h1>
<h3>数字放大十倍后 {{bigsum}}</h3>
<button @click="add(1)">+</button>
</div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
import '../store/index'
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods:{
add(){
this.$store.dispatch("jia",1);
}
},
computed:{
sum(){
return this.$store.state.sum;
},
bigsum(){
return this.$store.getters.bigsum;
},
}
}
</script>
|
# 2. 四种方法
mapActions({a:"add",b:"delete"})
可以从 action 中批量导入动作
1
2
3
| methods:{
...mapActions({add:'jia'}),
},
|
mapMutations({a:"add"})
可以批量从 mutation 中导入动作
1
2
3
| methods:{
...mapMutations({add:'jia'}),
},
|
另外两个方法同理
1
2
3
4
5
| computed:{
...mapState({sum:'sum'}),
...mapGetters({bigsum:'bigsum'}),
}
|
# 3.vuex 模块化
但当需要分类导入与引用时，就需要在 main.js 中分门别类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| import Vuex from 'vuex'
import Vue from 'vue'
const countAbout = {
namespaced:true,
actions:{
jia(context, value) {
context.commit("JIA", value);
},
},
mutations: {
JIA(state, value) {
state.sum += value;
}
},
state: {
sum:0,
},
getters: {
bigsum(state) {
return state.sum * 10;
}
}
}
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
countAbout,
}
})
|
在这样模块化之后，我们在使用方法时导入的写法需要改变
1
2
3
4
5
6
7
8
9
| methods:{
...mapActions('countAbout',{add:'jia'}),
...mapMutations({})
},
computed:{
...mapState('countAbout',{sum:'sum'}),
...mapGetters('countAbout',{bigsum:'bigsum'}),
}
|
在使用 map 方法导入的时候，需要在导入方法与数据的前方加上类名
但是同时在类的定义的过程中，要加上
用于开辟命名空间
