1.全局化注册组件
全局化注册是在构造器外部用Vue.component进行注册，下面是我注册的<my-div></my-div>的组件，可以放在多个构造器中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-div></my-div>
</div>
<script type="text/javascript">
Vue.component('my-div',{
template:`<h1>我是my-div全局组件</h1>`
})
var App = new Vue({
el:'#app'
})
</script>
</body>
</html>
image.png
2.局部注册组件
局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>局部组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-div></my-div>
</div>
<script type="text/javascript">
var App = new Vue({
el:'#app',
components:{
'my-div':{
template:`<h1>我是局部组件</h1>`,
}
}
})
</script>
</body>
</html>
image.png
作者：素时年锦
链接：https://www.jianshu.com/p/9dc48025174d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。