Vue 全局组件的几种写法

一朵小彩云

于 2018-08-01 11:23:39 发布

阅读量813

点赞数

本文链接：https://blog.csdn.net/baidu_39001881/article/details/81327598

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../animate.css" rel="stylesheet">
    <script type="text/javascript" src="../vue1026.js"></script>
</head>

<body>
<template id="login3">
    <a href="#">注册</a>|<a href="#">登陆</a>
</template>
<div id="app">

    <login></login>
    <login2></login2>
    <login3></login3>
</div>
</body>
<script>
    //1.0定义全局组件
    var login = Vue.extend({
        template: '<h1>精致的猪猪男孩</h1>'
    });
    //注册全局组件
    Vue.component("login", login);
    //2.0写法
    Vue.component('login2', {
        template: '<h1>精致的猪猪女孩</h1>'

    })

    //第三种写法(推荐这种写法)
    Vue.component('login3', {
        template: '#login3'

    })
    new Vue({
        el: '#app'
    });
</script>
</html>