Vue3组件化开发

Posted 2021-07-25 coder斌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3组件化开发相关的知识，希望对你有一定的参考价值。

Vue3组件化开发（二）

非父子组件的通讯

`provide`和`inject`的使用

最基本使用

父组件App.vue 子孙组件 Home.vue

父组件实例内属性provide

export default {
    provide:{
      //  填入要传的数据
      name:'fuzhibin',
      age:18,
      length:6
    }
}

子组件实例属性inject

export default {
  inject:['name','age','length'],
  data () {
    return {
    }
  }
}

此时我们父组件内的provide内的数据不能使用响应式系统内的数据
同时provide内的数据是一次性赋值的，数据二次改变，provide无法检测到

改进

vue3提供了 computed方法
provide采用函数写法

export default {
    provide(){
        return {
           name:'fuzhibin',
           age:18,
           length:computed(_=>this.array.length)
        }
    },
    components:{
        Main
    },
   data () {
    return {
        array:[1,2,3,4]
    }
  }
}

Mitt全局事件总线的使用

注意：Vue3 移除了事件总线，再Vue2中，通过全局全局属性挂载一个vue实例实现事件总线
Vue3使用事件总线，我们利用官方推荐的第三方库。如 mitt 。

安装

npm install mitt

使用

发射事件端

import mitt from 'mitt'
const mitter = mitt();
export default {
	.......,
	methods:{
		btnClic(){
			// emit方法发送事件，第一个参数发送事件的名字，第二个参数，携带参数
            // 一般是配合事件一起使用，我就放在一个点击事件内发送
			mitter.emit('btnClic',playload)
		}
	}
}

接收端

import mitt from 'mitt'
const mitter = mitt();
export default {
	.......,
	created(){
        // on方法监听事件，第一个参数要监听参数的名字，第二个参数，回调函数，res为事件携带的数据。
        // 在钩子函数内就监听
		mitter.on('btnClic',(res)=>{
            console.log(res)
        })
	}
}

其他方法：

取消监听

function fn(res){
    consloe.log(res);
}
mitter.on('btnClic',fn)
// 删除对应监听'btnClic'事件监听器，需传入对应的回调函数
mitter.off('btnClic',fn)
// 删除所有监听事件
mitter.all.clear()