本文详细阐述了在Vue.js中全局组件与局部组件的定义方式及其使用场景。全局组件可在应用任意位置调用，而局部组件仅限于注册它的实例内使用。通过代码示例，清晰展示了两种组件的实现方法。
组件定义可分为两部分：
一种是全局组件，另一种是局部组件;
区别是全局组件可以全局调用，而局部组件，在作用域外不可调用
1、首先来看一下全局组件，代码如下：
<!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>componen-1t</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>component-1</h1>
<hr>
<div id="app">
<js></js>
</div>
<script>
Vue.component('js', {
template: `<div style="color:red">我是全局的js组件</div>`
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
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>componen-1t</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>component-1</h1>
<hr>
<div id="app">
<js></js>
</div>
<script>
var app = new Vue({
el: '#app',
components: {
'js: {
template: `<div style="color:green">我是局部的js组件</div>`
}
}
})
</script>
</body>
</html>
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
