vue組件之全局注冊(cè)和局部注冊(cè)方式

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

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

一、什么是組件

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

二、全局注冊(cè)

全局注冊(cè)：當(dāng)vue創(chuàng)建的時(shí)候，不管這個(gè)組件是否使用，都會(huì)被加載，這樣的方式會(huì)比較占內(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ù)一：自定義的組件名稱【注意：不要全大寫，如果是二個(gè)單詞拼接，最好都是小寫，用-連接】
    //參數(shù)二：對(duì)象
    Vue.component('button-count', {
        template: "<button @click='count++'>{{count}}</button>",
        data: function () {
            return {
            }
        }
    })
    
    new Vue({
        el: '#app',
    })
</script>

注意： 在注冊(cè)vue組件的時(shí)候，一定不能忽略new Vue

三、局部注冊(cè)

局部注冊(cè)：當(dāng)我們使用到某個(gè)組件，該組件才會(huì)被創(chuàng)建，如果不使用該組件，那么該組件不會(huì)被創(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>這是一個(gè)組件</h1>"
        }
 
        new Vue({
            el:"#app",
            components:{
                //當(dāng)組件名稱二個(gè)首字母大寫的時(shí)候
                //html在識(shí)別的時(shí)候，會(huì)全部轉(zhuǎn)換為小寫，并且二個(gè)字母之間用-連接
                //當(dāng)變量名稱和屬性名稱相同的時(shí)候，可以只寫一個(gè)
                ButtonCount
            }
        });
 
    </script>
 
</body>
</html>

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

<!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)建一個(gè)template標(biāo)簽-->
<template id="ID">
<!--這個(gè)id就是外面聲明變量template屬性的屬性值
    最后把要寫的html寫到template標(biāo)簽里面
-->
<div>
    <h1>我是h1</h1>
</div>
</template>
</body>
</html>
<script>
    let HandleText = {
        //在這個(gè)對(duì)象里面存放template屬性和一個(gè)自定義的屬性值
        template: '#ID'
    }
    new Vue({
        el:'#app',
        components:{
            HandleText
        }
    })
</script>

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