Vue组件化基础

Vue组件化基础

钟小湖

June 8, 2020

300views

No comments

1330 words

前端编程记

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

注意：局部组件需要通过`components`引入

**在vue里，所有的vue实例都是组件**

![](https://cdn.xn2001.com/image-20200608150833926.png)

代码示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            margin: 50px;
            width: 200px;
            height: 30px;
            background-color: burlywood;
            border-width: 0;
        }
    </style>
</head>

<body>

<div id="app">
        
        <button @click="count++">我被点击了{{count}}次</button>
        
        <counter></counter>
        
        <button-couner></button-couner>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 全局申明组件
        Vue.component("counter", {
            template: `<button @click="count++">我被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 0
                }
            }
        });

// 局部组件
        const buttonC = {
            template: `<button @click="count++">我被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 0
                }
            }
        };

new Vue({
            el: "#app",
            data() {
                return {
                    count: 0
                }
            },
            //使用局部组件
            components: {
                'button-couner': buttonC,
            }
        })
    </script>
</body>

</html> 
```

<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：乐心湖's Blog</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://www.xn2001.com/archives/498.html">https://www.xn2001.com/archives/498.html</a></p><p class="content-copyright">声明：博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener" one-link-mark="yes">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p></blockquote>

腾讯云社区邀请各位技术博主加入，福利多多噢！

Last modification：June 24th, 2020 at 02:42 pm

如果觉得我的文章对你有用，请随意赞赏

Leave a Comment Cancel reply