建立全局組件的三種方式

時間 2019-11-12

標籤建立全局組件三種方式简体版

原文原文鏈接

什麼是組件？

　　組件的出現，就是爲了拆分Vue實例的代碼量的，可以讓咱們以不一樣的組件，來劃分不一樣的功能模塊，未來咱們須要什麼樣的功能，就能夠去調用對應的組件就能夠了。javascript

組件化和模塊化的區別

模塊化：是從代碼邏輯的角度進行劃分的，方便代碼分層開發，保證每一個模塊功能的職能單一。例如：NodeJS
組件化：是從UI界面的角度進行劃分的，前端的組件化，方便UI組件的重用

方式一

　　使用 Vue.extend 配合 Vue.component 來進行建立全局組件html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>獨秀不愛秀</title>
</head>
<body>
    <div id="app">
        <!-- 若是要使用組件，直接把組件的名稱，以 HTML 標籤的形式，引入到頁面中 -->
        <mycom1></mycom1>
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        // 1.1 使用 Vue.extend 來建立全局的 Vue 組件
        const com1 = Vue.extend({
            template: '<h3>這是使用 Vue.extent 建立的組件</h3>'// 經過 template 屬性，指定組件要展現的 HTML 結構
        });
        // 1.2 使用 Vue.component('組件的名稱', 建立出來的組件模板對象)
        // Vue.component('myCom1', com1);
        // 若是使用 Vue.component 定義全局組件的時候，組件名使用了 駝峯命名，則
        // 在引用的時候，須要把大寫字符改成小寫字符，同時，兩個單詞鏈接使用 -
        Vue.component('mycom1', com1);

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>
</html>

固然，方式一也能夠直接將第一步驟省略，直接：前端

Vue.component('mycom1', Vue.extend({
        template: '<h3>這是使用 Vue.extend 建立的組件</h3>'
}));

方式二

　　直接使用 Vue.component 建立組件（其實就是在方式一的基礎上更加省略而已）vue

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>獨秀不愛秀</title>
</head>

<body>
    <div id="app">
        <mycom2></mycom2>
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        /**
        * 2. 直接使用 Vue.component 建立組件
        * @param1  {String}  組件的名稱
        * @param2  {Object}  組件模板對象
        */        
        Vue.component('mycom2', {
            // 注意：不管是哪一種方式建立出來的組件，組件的模板中必須有且只有一個惟一的根元素
            template: '<div><h1>這是直接用 Vue.component 建立的組件</h1><span>123</span></div>'
        });

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

方式三

　　在方式二的基礎上將第二個參數中的HTML代碼結構，替換爲一個 ID：java

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>獨秀不愛秀</title>
</head>

<body>
    <div id="app">
        <mycom3></mycom3>
    </div>


    <!-- 在被控制的 #APP 外面，使用 template 元素定義組件的模板結構 -->
    <template id="tmpl">
        <div>
            <h1>這是經過 template 元素，在外部定義的組件結構，這個方式，有代碼的智能提示和高亮</h1>
            <h3>不錯，好用</h3>
        </div>
    </template>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        Vue.component('mycom3', {
            template: '#tmpl'
        });

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。