您的位置：首页 > Web前端 > Vue.js

Vue中注册全局组件的三种方式

2018-08-25 16:18 651 查看

1.方式一

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件的注册</title>
<script src="../vue.js"></script>
</head>
<body>
<template id="Mydemo">
<h1>Hello Time</h1>
</template>
<div id="app">
<account></account>
</div>
<script>
//注册全局组件
Vue.component('account',{
template:"#Mydemo",
})
new Vue({
el:"#app",
})
</script>
</body>
</html>

2.方式二

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件的注册</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<say-hello></say-hello>
</div>
<script>
//注册全局组件
Vue.component('say-hello',{
template:"<h2>Hello everyone</h2>",
});
//根实例
new Vue({
el:"#app",
})
</script>
</body>
</html>

3.方式三：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件的注册</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-list></my-list>
</div>
<script>
var list=Vue.extend({
template:'<h1>this is a list</h1>',
});
Vue.component("my-list",list);
//根实例
new Vue({
el:"#app",
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航