复习Vue20、函数式组件和混入(mixin)

最新推荐文章于 2024-05-07 09:25:14 发布

原创最新推荐文章于 2024-05-07 09:25:14 发布 · 389 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

笔记同时被 2 个专栏收录

59 篇文章

订阅专栏

Vue

21 篇文章

订阅专栏

本文介绍了Vue.js中函数式组件的特点及其应用场景，解释了如何利用函数式组件减少渲染开销。此外，还探讨了混入（mixin）的概念，展示了如何通过混入提高组件代码的复用性。

复习Vue20、函数式组件和混入(`mixin`)

20.1、函数式组件

组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法时，可以将组件标记为functional.这意味它无状态（没有响应式数据），也没有实例（没有this上下文）

因为只是函数，所以渲染的开销相对来说，较小。

函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。

20.2 混入（mixin）

混入(mixin)提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项被“混合”进入该组件本身的选项

// 定义一个混入对象
var myMixin={
    created:function(){
        this.hello()
    },
    methods:{
        hello:function(){
            console.log('hello world')
        }
    }
}
Vue.component('comp',{
    mixins:[myMixin]
})

“混入”可以提高组件的复用功能，例如：上面所写的hello这个方法，不仅在一个组件中使用，还会

在其它组件中使用.那么，我们的处理方式就是，可以将hello 这个方法单独定义在一个地方，如果某个组件想要使用，可以直接将该方法注入到组件中。