vue組件之全局注冊和局部注冊方式

更新時間：2024年03月24日 08:59:40 作者：姜泥斷了姒

這篇文章主要介紹了vue組件之全局注冊和局部注冊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、什么是組件

組件：是由HTML、CSS、JavaScript所組成，是把某塊效果界面封裝起來，提供了界面效果【代碼】的復(fù)用性【類似于Bootstrap】

二、全局注冊

全局注冊：當(dāng)vue創(chuàng)建的時候，不管這個組件是否使用，都會被加載，這樣的方式會比較占內(nèi)存

入門程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--    組件-->
    <button-count></button-count>
</div>
</body>
</html>
<script>
    //編寫組件
    //參數(shù)一：自定義的組件名稱【注意：不要全大寫，如果是二個單詞拼接，最好都是小寫，用-連接】
    //參數(shù)二：對象
    Vue.component('button-count', {
        template: "<button @click='count++'>{{count}}</button>",
        data: function () {
            return {
            }
        }
    })
    
    new Vue({
        el: '#app',
    })
</script>

注意： 在注冊vue組件的時候，一定不能忽略new Vue

三、局部注冊

局部注冊：當(dāng)我們使用到某個組件，該組件才會被創(chuàng)建，如果不使用該組件，那么該組件不會被創(chuàng)建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>
 
    <div id="app">
        <!--組件名稱-->
        <button-count></button-count>
    </div>
 
    <script>
        //創(chuàng)建組件
        let ButtonCount = {
            template:"<h1>這是一個組件</h1>"
        }
 
        new Vue({
            el:"#app",
            components:{
                //當(dāng)組件名稱二個首字母大寫的時候
                //html在識別的時候，會全部轉(zhuǎn)換為小寫，并且二個字母之間用-連接
                //當(dāng)變量名稱和屬性名稱相同的時候，可以只寫一個
                ButtonCount
            }
        });
 
    </script>
 
</body>
</html>

無論怎么注冊，html都比較麻煩，還需要寫到script里面去，所以需要優(yōu)化一下組件注冊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <handle-text></handle-text>
</div>
 
<!-- 一定要在容器外面，創(chuàng)建一個template標(biāo)簽-->
<template id="ID">
<!--這個id就是外面聲明變量template屬性的屬性值
    最后把要寫的html寫到template標(biāo)簽里面
-->
<div>
    <h1>我是h1</h1>
</div>
</template>
</body>
</html>
<script>
    let HandleText = {
        //在這個對象里面存放template屬性和一個自定義的屬性值
        template: '#ID'
    }
    new Vue({
        el:'#app',
        components:{
            HandleText
        }
    })
</script>

注意：因?yàn)槭墙M件，所以這個template標(biāo)簽里面只能有一個根標(biāo)簽