局部组件的创建
相比于全局组件在全局中定义：
直接与Vue对象平级，局部组件需要在Vue对象下创建，而局部组件时在Vue对象内部创建的。
相比于全局组件:
局部组件定义格式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<itembox></itembox>
<itembox></itembox>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
},
components:{
itembox:{
template:`
<div>
<h1>冒险岛</h1>
<h2>幻影</h2>
</div>
`
}
}
})
</script>26-35行定义了局部组件，局部组件与data、el、methods平级
- 在components内部可以定义多个组件
- 第27行定义了一个名为
itembox的组件 - 第28行为组件封装的代码：template
第12、13行调用了局部组件
注意：局部组件封装的代码也需要在一个共同的父标签下，如上方代码块的29、32行div标签
测试页面：
可以发现成功在绑定的标签内部调用了局部组件。
局部组件的作用域
相比与全局组件可以在任意的Vue对象绑定的标签中生效，而局部组件只能在创建局部组件的对象中使用。
抽离局部组件的代码片段
直接在局部组件封装代码片段同样没有代码编写提示，所以需要抽离封装的代码片段。
将局部组件中的itembox对应的对象直接赋值
局部组件抽离方法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<itembox></itembox>
<itembox></itembox>
</div>
</body>
</html>
<script>
var itembox = {
template:`
<div>
<h1>冒险岛</h1>
<h2>幻影</h2>
</div>
`
}
new Vue({
el:"#app",
data:{
},
methods:{
},
components:{
itembox //缩写格式，完整写法为itembox:itembox
}
})
</script>- 18-25行使用将局部组件对应的template对象抽离出来赋给变量
- 第36行绑定变量名
template对应的值（代码20-23行）也可以使用template标签来继续抽离。
局部组件抽离作用
提升代码整洁
提高复用性
可以将组件代码赋值给变量，让其他的vue对象也可以使用变量来达到使用组件的效果。
补充：es6属性与对应的值名称相同缩写
当属性与对应的值名称相同可以缩写,如:
var itembox=123
a = {itembox:itembox} //前者itembox为属性名，后者itembox代表变量的itembox
// 缩写
a = {itembox}当属性名和变量名相同时，只保留一个变量名即可。
此处评论已关闭