【6月日新计划更文活动】第3天

插槽

1、作用：让父组件可以向子组件指定位置插入 HTML 结构，也是一种组件间通信的方式。适用于父组件 ===> 子组件

2、分类：默认插槽、具名插槽、作用域插槽

3、使用方式： 1）、默认插槽

父组件内：
<Category>
         <div>HTML结构</div>
</Category>

子组件：
<template scope="atguigu">
    <div>
    <!-- 定义插槽 -->
    <slot>插槽默认内容…</slot>
  </div>
</template>

2）、具名插槽

父组件中：
<Category>
  <template slot=“center”>
      <div>HTML结构</div>
  </template>
  <template slot=“footer”>
      <div>HTML结构</div>
  </template>     
</Category>

子组件中：
<template scope="atguigu">
    <div>
    <!-- 定义插槽 -->
    <slot name="center">插槽1默认内容…</slot>
    <slot name="footer">插槽2默认内容…</slot>
  </div>
</template>

3）、作用域插槽： ①、理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。 (games 数据在 Category 组件中，但使用数据所遍历出来的结构由 APP 组件决定) ②、具体编码：

父组件中：
<Category>
   <template scope="atguigu">
      <!-- 生成ul列表 -->
    <ul>
      <li v-for="(item, index) in atguigu.game" :key="index">
        {{ item }}
      </li>
     </ul>
   </template>
</Category>
<Category>
  <template slot-scope="{ game }">
    <!-- 生成h4 标题 -->
    <h4 v-for="(item, index) in game" :key="index">{{ item }}</h4>
  </template>
</Category>

子组件中：
<template>
    <div class="category">
        <div>
            <slot :game="games" msg="Hello">我是默认插槽</slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "Category",
    props: ["listDate", "heading"],
    data() {
        return {
            games: ["Dead Cell", "Gta", "KOF", "Leagul of Lagents"],
        };
    },
};
</script>

Vuex

1、概念：专门在 Vue 中实现集中式状态 (数据) 管理的一个 Vue 插件，对 Vue 应用中多个组件的共享状态进行集中式的管理 (读 / 写)，也是一种组件间通信的方式，且适用于任意组件间通信

2、Github地址：github.com/vuejs/vuex

什么时候使用Vuex： ①、多个组件依赖于同一状态 ②、来自不同组件的行为需要变更同一状态

Vuex 工作原理图

搭建 Vuex 环境

①、创建文件：src / store / index.js

// 该文件用于创建 Vuex 中最为核心的 store

import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 使用 Vuex 插件
Vue.use(Vuex)

// 准备 actions —— 用于响应组件中的动作
const actions = {}
// 准备 mutations —— 用于操作数据 (state)
const mutations = {}
// 准备 state —— 用于存储数据
const state = {}

// 创建并暴露 store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

②、在main.js 中创建 vm 时传入 Store 配置项

......
// 引入 store
import Store from './store/index'
......
new Vue({
  Store,
  render: h => h(App),
}).$mount('#app')

③、store 内设置 Vuex 中的 store 和 $store：** **$ store 挂载在 Vue 原型对象上； store 挂载在组件实例对象上全局 Vue 注入 store 时候，要小写 s (否则无法获取 this.store )

// 准备 actions —— 用于响应组件中的动作
const actions = {
    jiaOdd(context, value) {
        console.log('jiaOdd was used in Actions')
        if (context.state.sum % 2) {
            // context.commit('JIA', value)
            context.state.sum += value
        }
    },
    jiaWait(context, value) {
        console.log('jiaWait was used in Actions')
        setTimeout(() => {
            context.commit('JIA', value)
        }, 1000);
    }
}
// 准备 mutations —— 用于操作数据 (state)
const mutations = {
    JIA(state, value) {
        // console.log('jia was used in mutations', state, value)
        console.log('JIA was used in mutations')
        state.sum += value
    },
    JIAN(state, value) {
        console.log("JIAN was used in mutations")
        state.sum -= value
    }
}
// 初始化数据
const state = {
    sum: 0, // 当前的值
}
// 创建并暴露 store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2、组件中读取 Vuex 中的数据： $store.state.sum

3、组件中修改 Vuex 中的数据：

store.dispatch(‘action 中的方法名’，数据) 
store.commit(“mutations 中的方法名”，数据) 
(若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即：不写 dispatch，直接写 commit)

Vue.js学习笔记(拾叁)

插槽

Vuex

Vuex 工作原理图

搭建 Vuex 环境