Prop 逐级透传问题
通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一棵巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦:
Provide (提供)
要为组件后代提供数据,需要使用到 provide 选项:
export default {data() {return {message: 'hello!'}},provide() {// 使用函数的形式,可以访问到 `this`return {message: this.message}}
}
Inject (注入)
要注入上层组件提供的数据,需使用 inject 选项来声明:
export default {inject: ['message'],created() {console.log(this.message) // injected value}
}
mixins
mixin定义
定义mixin也非常简单,它就是一个对象而已,只不过这个对象里面可以包含Vue组件中的一些常见配置,如data、methods、created等等。
在我们的项目src目录下新建mixin文件夹,然后新建index.js文件,该文件存放我们的mixin代码。
// src/mixin/index.js
export const mixins = {data() {return {msg: "我是小猪课堂",};},computed: {},created() {console.log("我是mixin中的created生命周期函数");},mounted() {console.log("我是mixin中的mounted生命周期函数");},methods: {clickMe() {console.log("我是mixin中的点击事件");},},
};
局部混入
我们的公共mixin定义好后,最重要就是如何使用它。根据不同的业务场景,我们可以分为两种:局部混入和全局混入。顾名思义,局部混入和组件的按需加载有点类似,就是需要用到mixin中的代码时,我们再在组件章引入它。全局混入的话,则代表我在项目的任何组件中都可以使用mixin。
组件中引入mixin也非常简单,我们稍微改造下App.vue组件。
// src/App.vue
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><button @click="clickMe">点击我</button></div>
</template><script>
import { mixins } from "./mixin/index";
export default {name: "App",mixins: [mixins],components: {},created(){console.log("组件调用minxi数据",this.msg);},mounted(){console.log("我是组件的mounted生命周期函数")}
};
</script>