vue的那些事（四）Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情 1.通讯方式的再续前缘

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情

1.通讯方式的再续前缘

props
emit
provide/inject
attrs
v-model
vuex
mitt
ref

attrs
说明：获取父组件除 class 和 style 除外的非 props 属性集合

// 父组件内容
<dialogChild :dataValue="title" :testContent="content"></dialogChild>

setup() {
  const state = reactive({
    title: '你好哟',
    name: '超越',
    content:'我试试'
  })
 
  return {
    ...toRefs(state)
  }
}

// 子组件内容
onMounted(() => {
  console.log('textContent:::', attrs.testContent) // 我试试
})

v-model vue3相对于vue2有点改变，但是原理差不多

// 父组件内容
<dialogChild v-model:title="title"></dialogChild>

setup() {
  const state = reactive({
    title: '你好哟',
    name: '超越',
    content: '我试试'
  })
  return {
    ...toRefs(state)
  }
}

// 子组件内容
<div>child-first:{{ title }}</div>
<div>
  <el-button size="small" type="primary" @click="changData">点击</el-button>
</div>

props: {
  title: {
    type: String,
    default: () => ''
  }
},
setup(props,{emit}) {
  const number = ref('1')
  const state = reactive({
    text: '测试',
    count: '2'
  })
  // 通过点击改变父组件的title内容
  const changData = () => {
    emit('update:title', '我很好') // title会变成：我很好
  }
  return {
    ...toRefs(state),
    number,
    changData
  }
}

// 可以在单个组件实例上创建多个 v-model 绑定，原理和上面的差不多
<dialogChild v-model:title="title" v-model:name="name"></dialogChild>

// 获取值和展示，请参考上面的
略

vuex
1.说明（开发大型单页应用）
vue的文档对他的解析说明是：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex其实是一个单项数据流的一个过程：

更好的了解可以参考该图：

2.安装

npm install vuex@next --save
or
yarn add vuex@next --save

3.使用

import {createStore, createLogger} from 'vuex'
const debug = process.env.NODE_ENV !== 'production'

export default createStore({
    state: {
        count: 0,
        name: '懒洋洋'
    },
    mutations: {
        increment(state) {
            state.count++
        }
    },
    actions: {
        incrementActions(context) {
            context.commit('increment')
        }
    },
    getters: {
        double(state) {
            return 2 * state.count
        }
    },
    strict: debug,
    plugins: debug ? [createLogger()] : []
})

说明：store 中的状态是响应式的，所以在组件中调用 store 中的状态，我们只需要在计算属性中返回即可。通过commit 和 dispatch 来改变 mutation 和 action 的值。

备注：
vuex持久化，可以使用：vuex-persistedstate
vuex的另一种工具可以使用 pinia

2.结语

目前介绍到这里，后续的后面再补充，如果对你有帮助的话，麻烦按上你的小心心❤️