3. 组件的分类
分类:全局组件、局部组件
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="itany">
<my-world></my-world>
</div>
</body>
<script>
// 全局组件,可以在所有vue实例中使用
Vue.component('my-world', {
template: '<h1>你好,世界!</h1>'
});
new Vue({
el: '.itany'
})
</script>
</html>
局部组件,只能在当前vue实例中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="itany">
<my-world></my-world>
</div>
</body>
<script>
new Vue({
el: '.itany',
components: { //局部组件,只能在当前vue实例中使用
'my-world': {
template: '<h3>welcome to guangzhou</h3>'
}
}
})
</script>
</html>
全局组件、局部组件,数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="itany">
<my-hello></my-hello>
<my-world></my-world>
</div>
</body>
<script>
/**
* 全局组件,可以在所有vue实例中使用
*/
Vue.component('my-hello', {
template: '<h3>{{name}}</h3>',
data: function() { //在组件中存储数据时,必须以函数形式,函数返回一个对象
return {
name: 'alice'
}
}
});
new Vue({
el: '.itany',
components: { //局部组件,只能在当前vue实例中使用
'my-world': {
template: '<h3>{{age}}</h3>',
data() {
return {
age: 25
}
}
}
}
})
</script>
</html>