VUE组件化_每个页面都new vue-CSDN博客

本文链接：https://blog.csdn.net/qq_41596346/article/details/121099182

1.简述

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在 vue 里，所有的 vue 实例都是组件

2.全局组件

我们通过 Vue 的 component 方法来定义一个全局组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>component组件化</title>
</head>

<body>
    <div id="app">
        <button @click="count++">点击了{{count}}次</button> <br><br>

        全局组件1:<counter></counter><br><br>
        全局组件2:<counter></counter><br><br>
    </div>

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

    <script>
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `<button @click="count++">点击了{{count}}次</button>`,
            data() {
                return {
                    count: 0
                }
            }
        });
        new Vue({
            el: "#app",
            data: {
                count: 0
            }
        })

    </script>
</body>
</html>

在这里插入图片描述
总结:

组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性
但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板
全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了，可以任意复用多次
data 必须是一个函数，不再是一个对象

3.局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>component组件化</title>
</head>

<body>
    <div id="app">
        <button @click="count++">点击了{{count}}次</button> <br><br>

        全局组件1:<counter></counter><br><br>
        全局组件2:<counter></counter><br><br>
        局部组件: <button-counter></button-counter> 
    </div>

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

    <script>
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `<button @click="count++">点击了{{count}}次</button>`,
            data() {
                return {
                    count: 0
                }
            }
        });


        //2、局部声明一个组件
        const buttonCounter = {
            template: `<button @click="count++">点击了{{count}}次</button>`,
            data() {
                return {
                    count: 0
                }
            }
        };

        new Vue({
            el: "#app",
            data: {
                count: 0
            },
            components:{
                //局部组件
                'button-counter': buttonCounter
            }
        })

    </script>
</body>

</html>