Vue中注册全局组件的三种方式
作者：Kratial
这篇文章主要介绍了Vue中注册全局组件的三种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
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>到此这篇关于Vue中注册全局组件的三种方式的文章就介绍到这了,更多相关vue注册全局组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！