• 有Vue3基础的读者。

• 打算开发组件库的读者。

  

• Props

• emits

• expose/ref

• Non-Props

• v-model

• 插槽slot

• provide/inject

• 总线bus

• getCurrentInstance

• Vuex

• Pinia

• mitt.js

收藏(学到)是自己的！

Props

父组件传值给子组件（简称：父传子）

父组件

//Parent.vue<template><!--使用子组件--><Child:msg="message"/></template><scriptsetup>importChildfrom'./components/Child.vue'//引入子组件letmessage='雷猴'</script>

子组件

//Child.vue<template><div>{{msg}}</div></template><scriptsetup>constprops=defineProps({msg:{type:String,default:''}})console.log(props.msg)//在js里需要使用props.xxx的方式使用。在html中使用不需要props</script>

在<scriptsetup>中必须使用definePropsAPI来声明props，它具备完整的推断并且在<scriptsetup>中是直接可用的。

更多细节请看文档。

/link?link=https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-defineemits

在<scriptsetup>中，defineProps不需要另外引入。

props其实还能做很多事情，比如：设置默认值default，类型验证type，要求必传required，自定义验证函数validator等等。

大家可以去官网看看，这是必须掌握的知识点！

props文档

/link?link=https://v3.cn.vuejs.org/guide/component-props.html

emits

子组件通知父组件触发一个事件，并且可以传值给父组件。（简称：子传父）

emits文档

/link?link=https://v3.cn.vuejs.org/guide/migration/emits-option.html

父组件

//Parent.vue<template><div>父组件：{{message}}</div><!--自定义changeMsg事件--><Child@changeMsg="changeMessage"/></template><scriptsetup>import{ref}from'vue'importChildfrom'./components/Child.vue'letmessage=ref('雷猴')//更改message的值，data是从子组件传过来的functionchangeMessage(data){message.value=data}</script>

子组件

//Child.vue<template><div>子组件：<button@click="handleClick">子组件的按钮</button></div></template><scriptsetup>//注册一个自定义事件名，向上传递时告诉父组件要触发的事件。constemit=defineEmits(['changeMsg'])functionhandleClick(){//参数1：事件名//参数2：传给父组件的值emit('changeMsg','鲨鱼辣椒')}</script>

和props一样，在<scriptsetup>中必须使用defineEmitsAPI来声明emits，它具备完整的推断并且在<scriptsetup>中是直接可用的。

更多细节请看文档。

/link?link=https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-defineemits

在<scriptsetup>中，defineEmits不需要另外引入。

expose/ref

子组件可以通过expose暴露自身的方法和数据。

父组件通过ref获取到子组件并调用其方法或访问数据。

expose文档

/link?link=https://v3.cn.vuejs.org/api/options-data.html#expose

用例子说话

父组件

//Parent.vue<template><div>父组件：拿到子组件的message数据：{{msg}}</div><button@click="callChildFn">调用子组件的方法</button><hr><Childref="com"/></template><scriptsetup>import{ref,onMounted}from'vue'importChildfrom'./components/Child.vue'constcom=ref(null)//通过模板ref绑定子组件constmsg=ref('')onMounted(()=>{//在加载完成后，将子组件的message赋值给msgmsg.value=com.value.message})functioncallChildFn(){//调用子组件的changeMessage方法com.value.changeMessage('蒜头王八')//重新将子组件的message赋值给msgmsg.value=com.value.message}</script>

子组件

//Child.vue<template><div>子组件：{{message}}</div></template><scriptsetup>import{ref}from'vue'constmessage=ref('蟑螂恶霸')functionchangeMessage(data){message.value=data}使用defineExpose向外暴露指定的数据和方法defineExpose({message,changeMessage})</script>

在<scriptsetup>中，defineExpose不需要另外引入。

• expose文档

  /link?link=https://v3.cn.vuejs.org/api/options-data.html#expose

• defineExpose文档

  /link?link=https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

Non-Props

所谓的Non-Props就是非Prop的Attribute。

意思是在子组件中，没使用prop或emits定义的attribute，可以通过$attrs来访问。

常见的有class、style和id。

还是举个例子会直观点

单个根元素的情况

父组件

//Parent.vue<template><Childmsg="雷猴世界！"name="鲨鱼辣椒"/></template><scriptsetup>import{ref}from'vue'importChildfrom'./components/Child.vue'</script>

子组件

//Child.vue<template><div>子组件：打开控制台看看</div></template>

打开控制台可以看到，属性被挂到HTML元素上了。

多个元素的情况

但在Vue3中，组件已经没规定只能有一个根元素了。如果子组件是多个元素时，上面的例子就不生效了。

//Child.vue<template><div>子组件：打开控制台看看</div><div>子组件：打开控制台看看</div></template>

此时可以使用$attrs的方式进行绑定。

//Child.vue<template><div:message="$attrs.msg">只绑定指定值</div><divv-bind="$attrs">全绑定</div></template>

v-model

v-model是Vue的一个语法糖。在Vue3中的玩法就更多(晕)了。

单值的情况

组件上的v-model使用modelValue作为prop和update:modelValue作为事件。

v-model参数文档

/link?link=https://v3.cn.vuejs.org/guide/component-custom-events.html#v-model-参数

父组件

//Parent.vue<template><Childv-model="message"/></template><scriptsetup>import{ref}from'vue'importChildfrom'./components/Child.vue'constmessage=ref('雷猴')</script>

子组件

//Child.vue<template><div@click="handleClick">{{modelValue}}</div></template><scriptsetup>import{ref}from'vue'//接收constprops=defineProps(['modelValue'//接收父组件使用v-model传进来的值，必须用modelValue这个名字来接收])constemit=defineEmits(['update:modelValue'])//必须用update:modelValue这个名字来通知父组件修改值functionhandleClick(){//参数1：通知父组件修改值的方法名//参数2：要修改的值emit('update:modelValue','喷射河马')}</script>

你也可以这样写，更加简单

子组件

//Child.vue<template><div@click="$emit('update:modelValue','喷射河马')">{{modelValue}}</div></template><scriptsetup>import{ref}from'vue'//接收constprops=defineProps(['modelValue'//接收父组件使用v-model传进来的值，必须用modelValue这个名字来接收])</script>多个v-model绑定

多个v-model绑定文档

/link?link=https://v3.cn.vuejs.org/guide/component-custom-events.html#多个-v-model-绑定

父组件

//Parent.vue<template><Childv-model:msg1="message1"v-model:msg2="message2"/></template><scriptsetup>import{ref}from'vue'importChildfrom'./components/Child.vue'constmessage1=ref('雷猴')constmessage2=ref('蟑螂恶霸')</script>

子组件

//Child.vue<template><div><button@click="changeMsg1">修改msg1</button>{{msg1}}</div><div><button@click="changeMsg2">修改msg2</button>{{msg2}}</div></template><scriptsetup>import{ref}from'vue'//接收constprops=defineProps({msg1:String,msg2:String})constemit=defineEmits(['update:msg1','update:msg2'])functionchangeMsg1(){emit('update:msg1','鲨鱼辣椒')}functionchangeMsg2(){emit('update:msg2','蝎子莱莱')}</script>

v-model修饰符

v-model还能通过.的方式传入修饰。

v-model修饰符文档

/link?link=https://v3.cn.vuejs.org/guide/component-custom-events.html#处理-v-model-修饰符

父组件

//Parent.vue<template><Childv-model.uppercase="message"/></template><scriptsetup>import{ref}from'vue'importChildfrom'./components/Child.vue'constmessage=ref('hello')</script>

子组件

//Child.vue<template><div>{{modelValue}}</div></template><scriptsetup>import{ref,onMounted}from'vue'constprops=defineProps(['modelValue','modelModifiers'])constemit=defineEmits(['update:modelValue'])onMounted(()=>{//判断有没有uppercase修饰符，有的话就执行toUpperCase()方法if(props.modelModifiers.uppercase){emit('update:modelValue',props.modelValue.toUpperCase())}})</script>

插槽slot

插槽可以理解为传一段HTML片段给子组件。子组件将<slot>元素作为承载分发内容的出口。

插槽文档

/link?link=https://v3.cn.vuejs.org/guide/component-slots.html

默认插槽

插槽的基础用法非常简单，只需在子组件中使用<slot>标签，就会将父组件传进来的HTML内容渲染出来。

默认插槽文档

/link?link=https://v3.cn.vuejs.org/guide/component-slots.html#插槽内容

父组件

//Parent.vue<template><Child><div>雷猴啊</div></Child></template>

子组件

//Child.vue<template><div><slot></slot></div></template>具名插槽

具名插槽就是在默认插槽的基础上进行分类，可以理解为对号入座。

具名插槽文档

/link?link=https://v3.cn.vuejs.org/guide/component-slots.html#具名插槽

父组件

//Parent.vue<template><Child><templatev-slot:monkey><div>雷猴啊</div></template><button>鲨鱼辣椒</button></Child></template>

子组件

//Child.vue<template><div><!--默认插槽--><slot></slot><!--具名插槽--><slotname="monkey"></slot></div></template>

父组件需要使用<template>标签，并在标签上使用v-solt:名称。

子组件需要在<slot>标签里用name=名称对应接收。

这就是对号入座。

最后需要注意的是，插槽内容的排版顺序，是以子组件里的排版为准。

上面这个例子就是这样，你可以仔细观察子组件传入顺序和子组件的排版顺序。

作用域插槽

如果你用过Element-Plus这类UI框架的Table，应该就能很好的理解什么叫作用域插槽。

作用域插槽文档

/link?link=https://v3.cn.vuejs.org/guide/component-slots.html#作用域插槽

父组件

//Parent.vue<template><!--v-slot="{scope}"获取子组件传上来的数据--><!--:list="list"把list传给子组件--><Childv-slot="{scope}":list="list"><div><div>名字：{{scope.name}}</div><div>职业：{{scope.occupation}}</div><hr></div></Child></template><scriptsetup>import{ref}from'vue'importChildfrom'./components/Child.vue'constlist=ref([{name:'雷猴',occupation:'打雷'},{name:'鲨鱼辣椒',occupation:'游泳'},{name:'蟑螂恶霸',occupation:'扫地'},])</script>

子组件

//Child.vue<template><div><!--用:scope="item"返回每一项--><slotv-for="iteminlist":scope="item"/></div></template><scriptsetup>constprops=defineProps({list:{type:Array,default:()=>[]}})</script>

我没写样式，所以用hr元素让视觉上看上去比较清晰我就是懒。

provide/inject

遇到多层传值时，使用props和emit的方式会显得比较笨拙。这时就可以用provide和inject了。

provide是在父组件里使用的，可以往下传值。

inject是在子(后代)组件里使用的，可以网上取值。

无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。

provide/inject文档

/link?link=https://v3.cn.vuejs.org/guide/component-provide-inject.html

父组件

//Parent.vue<template><Child></Child></template><scriptsetup>import{ref,provide,readonly}from'vue'importChildfrom'./components/Child.vue'constname=ref('猛虎下山')constmsg=ref('雷猴')//使用readonly可以让子组件无法直接修改，需要调用provide往下传的方法来修改provide('name',readonly(name))provide('msg',msg)provide('changeName',(value)=>{name.value=value})</script>

子组件

//Child.vue<template><div><div>msg:{{msg}}</div><div>name:{{name}}</div><button@click="handleClick">修改</button></div></template><scriptsetup>import{inject}from'vue'constname=inject('name','hello')//看看有没有值，没值的话就适用默认值（这里默认值是hello）constmsg=inject('msg')constchangeName=inject('changeName')functionhandleClick(){//这样写不合适，因为vue里推荐使用单向数据流，当父级使用readonly后，这行代码是不会生效的。没使用之前才会生效。//name.value='雷猴'//正确的方式changeName('虎躯一震')//因为msg没被readonly过，所以可以直接修改值msg.value='世界'}</script>

provide可以配合readonly一起使用，详情可以看上面例子和注释。

provide和inject其实主要是用在深层关系中传值，上面的例子只有父子2层，只是为了举例说明我懒。

总线bus

在Vue2有总线传值的方法，我们在Vue3中也可以自己模拟。

这个方式其实有点像Vuex或者Pinia那样，弄一个独立的工具出来专门控制数据。

但和Vuex或Pinia相比，我们自己写的这个方法并没有很好的数据跟踪之类的特性。

原理

我们创建一个Bus.js文件，用来控制数据和注册事件的。

Bus.js里有一个Bus类

• eventList是必须项，用来存放事件列表的。
• constructor里除了eventList外，其他都是自定义数据，公共数据就是存在这里的。
• $on方法用来注册事件。
• $emit方法可以调用$on里的事件。
• $off方法可以注销eventList里的事件。

然后需要用到总线的组件，都导入Bus.js，就可以共同操作一份数据了。

Bus.js

import{ref}from'vue'classBus{constructor(){//收集订阅信息,调度中心this.eventList={},//事件列表，这项是必须的//下面的都是自定义值this.msg=ref('这是一条总线的信息')}//订阅$on(name,fn){this.eventList[name]=this.eventList[name]||[]this.eventList[name].push(fn)}//发布$emit(name,data){if(this.eventList[name]){this.eventList[name].forEach((fn)=>{fn(data)});}}//取消订阅$off(name){if(this.eventList[name]){deletethis.eventList[name]}}}exportdefaultnewBus()

父组件

//Parent.vue<template><div>父组件:<spanstyle="margin-right:30px;">message:{{message}}</span><span>msg:{{msg}}</span></div><Child></Child></template><scriptsetup>import{ref}from'vue'importBusfrom'./Bus.js'importChildfrom'./components/Child.vue'constmsg=ref(Bus.msg)constmessage=ref('hello')//用监听的写法Bus.$on('changeMsg',data=>{message.value=data})</script>

子组件

//Child.vue<template><div>子组件：<button@click="handleBusEmit">触发Bus.$emit</button><button@click="changeBusMsg">修改总线里的msg</button></div></template><scriptsetup>importBusfrom'../Bus.js'functionhandleBusEmit(){Bus.$emit('changeMsg','雷猴啊')}functionchangeBusMsg(){//console.log(Bus.msg)Bus.msg.value='在子组件里修改了总线的值'}</script>

这个方法其实还挺好用的，但光看可能有点懵，请大家务必亲手敲一下代码实践一下。

getCurrentInstance

getcurrentinstance是vue提供的一个方法，支持访问内部组件实例。

getCurrentInstance只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用getCurrentInstance。请不要把它当作在组合式API中获取this的替代方案来使用。

说白了，这个方法适合在开发组件库的情况下使用，不适合日常业务开发中使用。

getCurrentInstance只能在setup或生命周期钩子中调用。

getcurrentinstance文档

/link?link=https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance

在<scriptsetup>中，我模拟了类似$parent和$children的方式。

父组件

//Parent.vue<template><div>父组件message的值:{{message}}</div><button@click="handleClick">获取子组件</button><Child></Child><Child></Child></template><scriptsetup>import{ref,getCurrentInstance,onMounted}from'vue'importChildfrom'./components/Child.vue'constmessage=ref('雷猴啊')letinstance=nullonMounted(()=>{instance=getCurrentInstance()})//子组件列表letchildrenList=[]//注册组件functionregistrationCom(com){childrenList.push(com)}functionhandleClick(){if(childrenList.length>0){childrenList.forEach(item=>{console.log('组件实例：',item)console.log('组件名(name)：',item.type.name)console.log('组件输入框的值：',item.devtoolsRawSetupState.inputValue)console.log('---------------------------------------')})}}</script>

子组件

//Child.vue<template><div><div>----------------------------</div>子组件：<button@click="handleClick">获取父组件的值</button><br><inputtype="text"v-model="inputValue"></div></template><script>exportdefault{name:'ccccc'}</script><scriptsetup>import{getCurrentInstance,onMounted,nextTick,ref}from'vue'constinputValue=ref('')letinstance=nullonMounted(()=>{instance=getCurrentInstance()nextTick(()=>{instance.parent.devtoolsRawSetupState.registrationCom(instance)})})functionhandleClick(){letmsg=instance.parent.devtoolsRawSetupState.messagemsg.value='哈哈哈哈哈哈'}</script>

可以将代码复制到你的项目中运行试试看，最好还是敲一遍咯。

Vuex

Vuex主要解决跨组件通信的问题。

在Vue3中，需要使用Vuexv4.x版本。

安装

用npm或者Yarn安装到项目中。

npminstallvuex@next--save#或yarnaddvuex@next--save使用

安装成功后，在src目录下创建store目录，再在store下创建index.js文件。

//store/index.jsimport{createStore}from'vuex'exportdefaultcreateStore({state:{},getters:{},mutations:{},actions:{},modules:{}})

在store/index.js下输入以上内容。

• state：数据仓库，用来存数据的。
• getters：获取数据的，有点像computed的用法(个人觉得)。
• mutations:更改state数据的方法都要写在mutations里。
• actions：异步异步异步，异步的方法都写在这里，但最后还是需要通过mutations来修改state的数据。
• modules：分包。如果项目比较大，可以将业务拆散成独立模块，然后分文件管理和存放。

然后在src/main.js中引入

import{createApp}from'vue'importAppfrom'./App.vue'importstorefrom'./store'constapp=createApp(App)app.use(store).mount('#app')State

store/index.js

//store/index.jsimport{createStore}from'vuex'exportdefaultcreateStore({state:{msg:'雷猴'}})

组件

//xxx.vue<scriptsetup>import{useStore}from'vuex'conststore=useStore()console.log(store.state.msg)//雷猴</script>Getter

我觉得Getter方法和computed是有点像的。

比如我们需要过滤一下数据，或者返回时组装一下数据，都可以用Getter方法。

store/index.js

//store/index.jsimport{createStore}from'vuex'exportdefaultcreateStore({state:{msg:'雷猴'},getters:{getMsg(state){returnstate.msg'世界！'}}})

组件

//xxx.vue<scriptsetup>import{useStore}from'vuex'conststore=useStore()console.log(store.getters.getMsg)//雷猴世界！</script>Mutation

Mutation是修改State数据的唯一方法，这样Vuex才可以跟踪数据流向。

在组件中通过commit调用即可。

store/index.js

//store/index.jsimport{createStore}from'vuex'exportdefaultcreateStore({state:{msg:'雷猴'},mutations:{changeMsg(state,data){state.msg=data}}})

组件

//xxx.vue<scriptsetup>import{useStore}from'vuex'conststore=useStore()store.commit('changeMsg','蒜头王八')console.log(store.state.msg)//蒜头王八</script>Action

我习惯将异步的东西放在Action方法里写，然后在组件使用dispatch方法调用。

store/index.js

//store/index.jsimport{createStore}from'vuex'exportdefaultcreateStore({state:{msg:'雷猴'},mutations:{changeMsg(state,data){state.msg=data}},actions:{fetchMsg(context){//模拟ajax请求setTimeout(()=>{context.commit('changeMsg','鲨鱼辣椒')},1000)}}})

组件

//xxx.vue<scriptsetup>import{useStore}from'vuex'conststore=useStore()store.dispatch('fetchMsg')</script>Module

Module就是传说中的分包了。这需要你将不同模块的数据拆分成一个个js文件。

我举个例子，目录如下

store|-index.js|-modules/|-user.js|-goods.js

• index.js对外的出口（主文件）
• modules/user.js用户相关模块
• modules/goods.js商品模块

index.js

import{createStore}from'vuex'importuserfrom'./modules/user'importgoodsfrom'./modules/goods'exportdefaultcreateStore({state:{},getters:{},mutations:{},actions:{},modules:{user,goods}})

user.js

constuser={state:{},getters:{},mutations:{},actions:{}}exportdefaultuser

goods.js

constgoods={state:{},getters:{},mutations:{},actions:{}}exportdefaultgoods

然后在各个模块里放入相应的数据和方法就行。

在组建中调用方法和访问数据，都和之前的用法差不多的。

Pinia

Pinia是最近比较火热的一个工具，也是用来处理跨组件通信的，极大可能成为Vuex5。

Pinia文档

https://pinia.vuejs.org/

从我使用Pinia一阵后的角度来看，Pinia跟Vuex相比有以下优点：

• 调用时代码跟简洁了。
• 对TS更友好。
• 合并了Vuex的Mutation和Action。天然的支持异步了。
• 天然分包。

除此之外，Pinia官网还说它适用于Vue2和Vue3。但我没试过在Vue2中使用我懒得试。

Pinia简化了状态管理模块，只用这3个东西就能应对日常大多任务。

• state：存储数据的仓库
• getters：获取和过滤数据（跟computed有点像）
• actions：存放“修改state”的方法

我举个简单的例子

安装npminstallpinia#或yarnaddpinia注册

在src目录下创建store目录，再在store里创建index.js和user.js

目录结构如下

store|-index.js|-user.js

index.js

import{createPinia}from'pinia'conststore=createPinia()exportdefaultstore

user.js

常见的写法有2种，选其中一种就行。

import{defineStore}from'pinia'//写法1exportconstuseUserStore=defineStore({id:'user',//id必填，且需要唯一state:()=>{return{name:'雷猴'}},getters:{fullName:(state)=>{return'我叫'state.name}},actions:{updateName(name){this.name=name}}})//写法2exportconstuseUserStore=defineStore('user',{state:()=>{return{name:'雷猴'}},getters:{fullName:(state)=>{return'我叫'state.name}},actions:{updateName(name){this.name=name}}})

然后在src/main.js中引入store/index.js

src/main.js

import{createApp}from'vue'importAppfrom'./App.vue'importstorefrom'./store'constapp=createApp(App)app.use(store).mount('#app')在组件中使用

组件

//xxx.vue<template><div><div>name:{{name}}</div><div>全名：{{fullName}}</div><button@click="handleClick">修改</button></div></template><scriptsetup>import{computed}from'vue'import{storeToRefs}from'pinia'import{useUserStore}from'@/store/user'constuserStore=useUserStore()//constname=computed(()=>userStore.name)//建议const{name,fullName}=storeToRefs(userStore)functionhandleClick(){//不建议这样改//name.value='蝎子莱莱'//推荐的写法！！！userStore.updateName('李四')}</script>啰嗦两句

其实Pinia的用法和Vuex是挺像的，默认就是分包的逻辑，在这方面我支持菠萝(Pinia)。

Pinia还提供了多种语法糖，强烈建议阅读一下官方文档（https://pinia.vuejs.org/）。

mitt.js

我们前面用到的总线Bus方法，其实和mitt.js有点像，但mitt.js提供了更多的方法。

比如：

• on：添加事件
• emit：执行事件
• off：移除事件
• clear：清除所有事件

mitt.js不是专门给Vue服务的，但Vue可以利用mitt.js做跨组件通信。

• github地址：https://github.com/developit/mitt

• npm地址：/link?link=https://www.npmjs.com/package/mitt

安装npmimitt使用

我模拟一下总线Bus的方式。

我在同级目录创建3个文件用作模拟。

Parent.vueChild.vueBus.js

Bus.js

//Bus.jsimportmittfrom'mitt'exportdefaultmitt()

Parent.vue

//Parent.vue<template><div>Mitt<Child/></div></template><scriptsetup>importChildfrom'./Child.vue'importBusfrom'./Bus.js'Bus.on('sayHello',()=>console.log('雷猴啊'))</script>

Child.vue

//Child.vue<template><div>Child：<button@click="handleClick">打声招呼</button></div></template><scriptsetup>importBusfrom'./Bus.js'functionhandleClick(){Bus.emit('sayHello')}</script>

此时，点击Child.vue上的按钮，在控制台就会执行在Parent.vue里定义的方法。

mitt.js的用法其实很简单，建议跟着官方示例敲一下代码，几分钟就上手了。