局部组件
局部组件
概念
概念：我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。
整体流程：1创建局部组件 => 2在根组件中注册局部组件 => 3解析{}中的vue语法 => 4渲染局部组件
-
注意1： 局部组件都要定制自己的template，并且template里面一定是一个大div包裹着所需要的其他标签。
-
注意2： 局部组件因为被多次引用，所以每个局部组件都要有自己的名称空间，所以data和根组件有区别。data的值使用函数来实现。
- 这里我们简单说下data为函数的原因。data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。
<div id="app">
<!--<div class="box">-->
<!--<img src="http://a.hiphotos.baidu.com/image/h%3D300/sign=e543b919a151f3dedcb2bf64a4eff0ec/4610b912c8fcc3cebba8b8e09c45d688d53f20fc.jpg" alt="">-->
<!--<p>野兽</p>-->
<!--</div>-->
<!--局部组件渲染-->
<box-tag></box-tag>
<box-tag></box-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建局部组件 => 在根组件中注册 => 解析{}中的vue语法 => 渲染局部组件
let box = {
template: `
<div class="box">
<img src="img/001.jpg" alt="">
<p>
<span @click="btnClick">点击了{{ num }}下</span>
<p>野兽</p>
</p>
</div>
`,
//正确的简写
data () {
return {
num: 0
}
},
methods: {
btnClick () {
// alert(123)
this.num += 1;
}
}
};
new Vue({
el: '#app',
components: {
// box, // 只写box代表key与value变量同名
boxTag: box, // js支持的驼峰命名法与html的-连接有语法对应
// 'box-tag': box,
// ps: js 对应 html变量名对应
// localTag 对应 local-tag 因为html不区分大小写 所以用-表示大写
// 'local-tag'对应 local-tag
// localtag 对应 localtag
}
})
</script>
</html>
演示效果
详细代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件</title>
<style>
.box {
width: 200px;
text-align: center;
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
float: left;
}
.box img {
width: 100%;
}
.box p {
margin: 0;
}
.box span:hover {
cursor: pointer;
color: orange;
}
</style>
</head>
<body>
<div id="app">
<!--<div class="box">-->
<!--<img src="http://a.hiphotos.baidu.com/image/h%3D300/sign=e543b919a151f3dedcb2bf64a4eff0ec/4610b912c8fcc3cebba8b8e09c45d688d53f20fc.jpg" alt="">-->
<!--<p>野兽</p>-->
<!--</div>-->
<!-- <box></box>-->
<!-- <box></box>-->
<box-tag></box-tag>
<box-tag></box-tag>
<!--
问题：数据 父组件 => 子组件
父组件根据数组数据(box_data)渲染多个子组件，遍历得到的数据(box_obj)是渲染子组件的，
如何将遍历的数据传递给子组件
-->
<div style="clear: both">
<box-tag v-for="box_obj in box_data"></box-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建局部组件 => 在根组件中注册 => 解析{}中的vue语法 =>渲染局部组件
let box = {
template: `
<div class="box">
<img src="img/001.jpg" alt="">
<p>
<span @click="btnClick">点击了{{ num }}下</span>
<p>野兽</p>
</p>
</div>
`,
// data: { // 错误的
// num: 0
// },
// data: function () { // 每个复用的子组件都应该有自己的一套数据，所以要用一个局部作用域存储，保证数据的隔离性
// return { // data的值还是字典，所以函数的返回值是字典即可
// num: 0
// }
// },
data () {
return {
num: 0
}
},
methods: {
btnClick () {
// alert(123)
this.num += 1;
}
}
};
new Vue({
el: '#app',
// 2在根组件中注册局部组件
components: {
// box, // key与value变量同名
boxTag: box, // js支持的驼峰命名法与html的-连接有语法对应
// 'box-tag': box,
}
data: {
box_data: [1,2,2,3,3,3]
}
})
</script>
</html>
演示效果
