从零开始学VUE之组件化开发(注册全局组件)
全局组件是通过Vue.component在Vue实例声明之前注册的,可以在全局任意地方调用,只要是属于Vue接管的界面
注册全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--3:使用组件,必须在#app里面-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
</body>
<script>
// 1:创建组件构造器对象
const cpnC = Vue.extend({
// 在ES6中可以使用 `` 标识字符串 并且可以换行不需要拼接
template: `
<div>
<h2>this is cpn</h2>
<span>this is span!</span>
</div>
`
})
/**
* 2:注册组件
* 第一个参数:使用时的标签名
* my-cpn=myCpn 使用时会自动将驼峰转为中横线
* 第二个参数:要注册的组件
* 通过Vue.component注册的组件为全局组件,意味着可以在全部的vue实例中调用
*/
Vue.component('my-cpn',cpnC);
const vue = new Vue({
el: '#app',
data: {}
})
</script>
</html>运行效果
作者：彼岸舞
时间：2021\06\02
内容关于：VUE
本文属于作者原创,未经允许,禁止转发
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-06-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
