非父子组件通信 -- 爷孙跨组件通信
provide与inject 在父组件提供依赖，用的较少，一般用Vuex
- 父组件
- provide：{//与data、methods同级，对象写法用this拿不到data数据
- name:'123',
- age: '345',
- }
- provide(){
- return {
- name: this.names, //没法响应式
- }
- }
- 最终写法
- import { computed } from 'vue';
- export default {
- provide(){ //默认写法
> - return {
> - name: computed(() => this.names), //计算属性做包裹，即成响应式数据
> - }
> - }
- 子孙组件
- inject:["name","age"]
全局事件总线mitt库
- 使用场景：兄弟组件，非父子组件之间，一个组件发生事件，在其他组件监听
- 安装
- npm install mitt
- 使用
- 创建封装一个eventbus.js文件
- import mitt from 'mitt';
- const emitter = mitt(); //调用会返回对象
- export default emitter; //导出她
-
- A组件(发生事件)
- import emitter from './xxx'
- 某fn(){
- emitter.emit('add',{ A:a,B:b }) //定义事件名
- }
-
- B组件
- import emitter from './xxx'
- created(){
- emitter.on("add",(info) => { //对add事件进行监听，info传递过来的数据
- console.log(info)
- })
- emitter.on("*",(type，info) => { //监听所有事件
- console.log(type，info)
- })
- }
- 取消监听
- emitter.all.clear() //取消所有
-
- function onfoo(){}
- emitter.on('foo', onfoo) //监听
- emitter.off('foo',onfoo) //取消
插槽slot
-
插槽slot的基本使用
- 在封装的组件内的html位置写上,在使用组件时,需要在插槽的位置放的东西
- 可以传组件进去
- 默认元素，使用i标签
- 多个slot 插槽会各自分配一份
-
具名插槽的基本使用
- 组件里（子）给slot一个具体的名字
- 动态插槽思路，使用props传递插槽名，但注意父组件定义v-slot：[name] ,加中括号会解析成value值
- 缩写v-solt: 替换为 #, 组件<a #name>我是插槽内容
- 使用组件时（父）,需要使用模板
- <template v-slot:left>
- <span>想要放置的元素或内容</span>
- </template>
- 作用域插槽
- 编译作用域，指的是，父组件拿不到子组件数据
- 具名插槽加作用域插槽：v-slot:left="slotProps"
- 解决办法：子组件传递数据给父组件
- 子组件定义属性
- <slot :name="name"></slot>
- 父组件
- <a name="svn1">
- <template v-slot="slotProps">
- <span>{{slotProps.name}}</span>
- </template>
- </a>
