<!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>
Vue 全局组件的几种写法
猜你喜欢
转载自blog.csdn.net/baidu_39001881/article/details/81327598
今日推荐
周排行