快捷導(dǎo)航

vue如何在main.js中配置全局的通用公共組件

更新時(shí)間：2023年01月13日 14:36:59 作者：牛先森家的牛奶

這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

在main.js中配置全局的通用公共組件

1、在main.js中直接引入并注冊(cè)

main.js引入并注冊(cè)

import Loading from './components/Loading.vue';
Vue.component('Loading', Loading);

2、頁(yè)面中使用組件

html中使用：

<template>
? ?<div class='wrapper'>
? ? ? ?<Loading ?:ready="ready"></Loading>
? ?</div>
</template>
export default {
? name: "index",
? data() {
? ? return {
? ? ? ready: false,
? ? };
? },
? created() {
? ?// 這里是為了模擬改loading的顯示和隱藏用的函數(shù)
? ? setTimeout(() => {
? ? ? this.ready = true
? ? }, 3000);
? },
? computed: {},
? methods: {
? },
};
</script>

vue.js全局組件的三種方式

組件：button imageview listview等這些都是AS系統(tǒng)提供給我們

使用的組件；前端也有像類似于后端的組件概念。

組件的語(yǔ)法格式：

全局組件

Vue.component(‘組件名’,{代碼的定義})

1.組件名稱：

羊肉串法：my-comp-name ->
駱駝/pascal法: orderItem- 或

2.代碼的定義

2.1 template:‘HTML代碼’
2.2 template: 多行代碼,反引號(hào)，是ECMAScript6之后提供給我們的符號(hào);
2.3 template：外部定義的方式；

三種方式定義分別如下：

第一種方式，單引號(hào)（或雙引號(hào)）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局組件</title>
    <script src="../vue.js"></script>
</head>
<!-- 做下第一個(gè)組件的案例，后續(xù)前后端 開發(fā)會(huì)用到! -->

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <order-item></order-item>
    </div>
    <script>
        //1.需要針對(duì)order-item這個(gè)組件做一個(gè)定義，之前沒(méi)有定義的；
        Vue.component('order-item',
            { template: '<ul><li>今天愚人節(jié)上課</li></ul>' }
        );
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '全局組件的定義!'
            }
        });
    </script>
</body>

</html>

第二種方式反引號(hào)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <order-item></order-item>
    </div>
    <div id="app1">
        <order-item></order-item>
    </div>
    <script>
        //1.定義組件;
        Vue.component('order-item', {
            template: `
                <div>
                    <h1>反引號(hào)的全局組件</h1>    
                    <p>京東特賣<p>
                    <ul><li>LV包包</li><li>GuCCI</li></ul>
                </div>
            `
        })
        //2.綁定
        new Vue({
            el: '#app'
        });
        new Vue({
            el: '#app1'
        });
    </script>
</body>

</html>

第三種方式外部ID

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <btn-counter></btn-counter>
    </div>
    <template id="btn-counter">
        <button @click="add">單擊{{count}}次</button>
    </template>
    <script>
        //1.全局組件的定義;做個(gè)小作業(yè)做下測(cè)試；涵蓋了：組件 data methods三種方式;
        Vue.component('btn-counter', {
            template: '#btn-counter',
            data: function () { return { count: 0 } },
            methods: { add: function () { this.count++ } }
        })
        //2.綁定;
        let vm1 = new Vue({ el: '#app' });
    </script>
</body>

</html>