Vue知识点总结(9)——局部组件的创建和使用（超级详细）

为什么要组件化开发？

有时候页面代码量太大，逻辑太多或者同一个功能组件在许多页面均有使用，维护起来相当复杂，这个时候，就需要组件化开发来进行功能拆分、组件封装，已达到组件通用性，增强代码可读性，维护成本也能大大降低。
组件化很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对html" title=前端>前端工程化及降低代码的维护来说，是有很大的好处的，耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。

组件有什么特性？

专一性一个组件只专注做一件事，且把这件事做好。
可配置性一个组件，要明确它的输入和输出分别是什么，要做可配置性，最基本的方式是通过属性向组件传递配置的值，而在组件初始化的生命周期内，通过读取属性的值做出对应的显示修改。还有一些方法，通过调用组件暴露出来的函数，向函数传递有效的值；修改全局
CSS样式；向组件传递特定事件，并在组件内监听该事件来执行函数等。
标准性任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
复用性任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。

在Vue中，组件化开发是核心的支柱和特性。Vue分别提供了局部和全局组件供使用。

今天我们说一下局部组件的创建和使用。

html"><div id="app">
    <App></App>
</div>

html" title=javascript>javascript"><script>
    // 注意：在组件中这个data必须是一个函数,返回一个对象
    const App = {
        data(){
            return {
                msg:'我是App组件'
            }
        },
        template:`
        <div>
            <h3>{{msg}}</h3>
            <button @click='handleClick'>按钮</button>    
        </div>
        `,
        methods: {
            handleClick(){
                this.msg = '我被改变了'
            }
        }
    
    }
    new Vue({
        el:'#app',
        data:{

        },
        components: {
            // 挂载子组件
            App
        }
    });
</script>

局部组件的创建方式是const 组件名 = { } 的形式。
{ }内的代码格式和创建Vue实例中的形式很类似。
但是需要注意的是，我们在创建Vue实例的时候，实例内的data是data:{ }的格式，但是组件中的data必须是一个函数，返回一个对象，data(){ return{ } }。 其他的属性和Vue实例中的基本一致。
最重要的就是这个template属性，我们可以把需要封装的html内容放到这里，在例子中，我写了一个h3标签和一个button标签，并且给button绑定了点击事件，事件的内容我们依然写到了methods中。
这样就完成了一个基本的组件的封装。
组件我们已经封装好了，下面要做的事情就是挂载，把封装好的组件挂载到我们需要的Vue实例上，components就是实例中挂载组件的属性，组件的名字要和创建时保持一致，例子中我写的App。

到现在为止我们已经完成了组件的封装和挂载，接下来就是使用了。使用的方式很简单，就像我们使用其它组件时一样，<组件名></组件名>。

然后我们看一下效果：
在这里插入图片描述

在页面的div中，我们只写了一个App标签，但是渲染到页面上的有h3标签和button标签，我们是通过自定义组件来完成的，这就是组件的意义。

然后我们点一下按钮，因为我们在封装组件时，也写了点击事件的内容，看看是否奏效。
在这里插入图片描述
没有问题。
这样我们就完成了局部组件的封装、挂载和使用。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、html" title=前端>前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的html" title=前端>前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
在这里插入图片描述