23. VUE 组件化开发

原创

咸咸瑜瑜 2022-05-31 18:34:25 ©著作权

文章标签 vue.js 组件化构造器 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者咸咸瑜瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

什么是组件化？

如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解，那么组件化开发也是类似于这样的思想：

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

组件化是Vue.js中的重要思想

它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

任何的应用都会被抽象成一颗组件树。

23. VUE 组件化开发_组件化

有了组件化的思想，我们在之后的开发中就要充分的利用它。

尽可能的将页面拆分成一个个小的、可复用的组件。

这样让我们的代码更加方便组织和管理，并且扩展性也更强。

注册组件的基本步骤

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

1 创建组件构造器 2 注册组件 3 使用组件。

就是类似于这样。

实现：

<div id="app">
<!--    这个m-title 是我自己定义的，可以用多次    -->
        <m-title></m-title>
    </div>

<!-- 在外面无效 我也不知道为什么 学到后面会讲解 -->
    <m-title></m-title>



<script src="js/vue.js"></script>
<script>

    <!-- 1.创建组件构造器 -->
     const test = Vue.extend({
         template:`
            <div>
            <h2>我是h2</h2>
</div>
         `
     })
    
     //注册组件
     Vue.component('m-title',test)
    
    const app = new Vue({
        el:"#app",
        data:{
            s1:"a"
        }
    })

</script>

注意！内个ES6写法写内个代码是 `` 不是单引号，是波浪线内个键盘 .

老师说可移植性很高甚至可以跨工程

其实上面的在VUE2.x之后就看不到了，上面的写法是最原始的，而且上面的是用的是 “全局组件”

全局组件和局部组件：

如果有两个Vue 实例，那么我注册的m-title 这个组件是全局的话，在那个实例都可以用，例如：

<div id="app">
        我是app1 因为m-title是全局组件 大家都可以直接用
        <m-title></m-title>
        <hr>
    </div>

<div id="app2">
    我是app2 因为m-title是全局组件 大家都可以直接用
    <m-title></m-title>
    <hr>

</div>


<script src="js/vue.js"></script>
<script>

     const test = Vue.extend({
         template:`
            <div>
            <h2>我是h2</h2>
            <p>我是标题</p>
            </div>
         `
     })

     //注册组件
     Vue.component('m-title',test)

    const app = new Vue({
        el:"#app",
    })

     const app2 = new Vue({
         el:"#app2",
     })

</script>

即：

当我们通过调用Vue.component()注册组件时，组件的注册是全局的这意味着该组件可以在任意Vue示例下使用。

如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件：

注册局部组件：

<body>

    <div id="app">
        APP
        <cpn></cpn>
        <hr>
    </div>

<div id="app2">
    APP2
    <cpn></cpn> <!--这个在这里写没用 因为cpn是局部组件 -->
    <hr>
</div>


<script src="js/vue.js"></script>
<script>

        //创建组件构造器
     const test = Vue.extend({
         template:`
            <div>
            <h2>我是h2</h2>
            <p>我是标题</p>
            </div>
         `
     })

     /** 注册全局组件 【此处已注释】
     Vue.component('m-title',test)*/

    const app = new Vue({
        el:"#app",

        /***用components 来注册挂成为局部组件【cpn只能在app区域中可用】
        cpn是key（标签名）
        test是注册的组件*/
        components:{
            'cpn':test
        }
    })

     const app2 = new Vue({
         el:"#app2"
     })

</script>

</body>