vue 组件化学习

最新推荐文章于 2024-07-16 15:41:21 发布

再让我学一会吧！

最新推荐文章于 2024-07-16 15:41:21 发布

阅读量149

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ypxcan/article/details/118415595

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue的组件化思想，强调了组件化在代码组织和管理中的重要性，通过创建组件构造器、注册及使用组件的步骤进行详细讲解。组件可以拥有自己的数据，并能通过props和事件实现父子组件间的通信，提高代码的复用性和扩展性。

摘要由CSDN通过智能技术生成

什么是组件化？

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展
但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

Vue组件化思想

他提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
任何的应用都会被抽象成一颗组件树

组件化思想的应用：

有了组件化的思想，我们在之后的开发中就要充分的利用它
尽可能的将页面拆分成一个个小的，可复用的组件
这样让我们的代码更加方便组织和管理，并且扩展性也更强

所以，外组件是Vue开发中，非常重要的一个篇章，要认真学习

注册组件的基本步骤

组件的使用分成三个步骤：

创建组件构造器
注册组件
使用组件

1.调用Vue.extend()方法创建组件构造器

2.调用Vue.component()方法注册组件

3.在Vue实例的作用范围内使用组件

<body>
<div id="app">
    <!--3.使用组件-->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
    //1.创建组件构造器对象
    const cpnC = Vue.extend({
        template: `
        <div>
            <h2>我是标题</h2>
            <p>我是内容</p>
            <p>woshineirong</p>
        </div>`
    })
    //2.注册组件
    Vue.component('my-cpn', cpnC)

    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!'
        }
    })
</script>
</body>