Vue新手入门-3_新手入vue3-CSDN博客

本文链接：https://blog.csdn.net/weixin_38023551/article/details/78825250

基于vue2.5.9版本

定义全局组件（3种写法）

首先声明一个new Vue（{}）；然后在js里面编写；最后把注册的组件放入进去即可；

写法-1

 /*1.0 定义一个组件写法*/
    //定义组件
    var login12 = Vue.extend({
        template: "    <h1>登录12</h1>",
    })
    //注册组件
    Vue.component("login1", login12)
    //在html中
    <div id="app">
        <login1></login1>
    </div>

写法-2

/*2.0 定义一个组件写法*/
    Vue.component("login", {
        template: "<h1>登录</h1>",
    })
//在html中
<div id="app">
    <login></login>
</div>

写法-3

/*3.0 定义一个组件写法*/这里有两种写法一种是放入`template` ；另一种是放入`script`
    Vue.component("ac1", {
        template: "#acc1",
    })

    Vue.component("ac", {
        template: "#acc",
    })
    //在html中
    <div id="app">
        <ac></ac>
        <ac1></ac1>
    </div>
    //----
    <template id="acc">
        <a href="#">登录</a>
    </template>
    <script id="acc1" type="text/x-handlebars-template">
        <a href="#">登录script</a>
    </script>

最后-附上代码

<body>
<div id="app">
    <login></login>
    <ac></ac>
    <ac1></ac1>
    <login1></login1>
</div>
<template id="acc">
    <a href="#">登录</a>
</template>
<script id="acc1" type="text/x-handlebars-template">
    <a href="#">登录script</a>
</script>
<script>
    /*1.0 定义一个组件写法*/
    //定义组件
    var login12 = Vue.extend({
        template: "    <h1>登录12</h1>",
    })
    //注册组件
    Vue.component("login1", login12)
    /*2.0 定义一个组件写法*/
    Vue.component("login", {
        template: "<h1>登录</h1>",
    })
    /*3.0 定义一个组件写法*/
    Vue.component("ac1", {
        template: "#acc1",
    })

    Vue.component("ac", {
        template: "#acc",
    })

    new Vue({
        el: "#app",
    })
</script>
</body>