<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件定义</title>
<script src="vue.js"></script>
</head>
<body>
<h4>
作用:组件复用
<br/>
组件通信
<br/>
父子组件正向传数据或者参数 props(声明他期待获得的数据)
</h4>
<div id="box">
<!-- 进行调用父组件-->
<tabbar></tabbar>
</div>
<!-- template包裹的标签不会被渲染-->
<template id="footer">
<div>
<!-- 调用子组件,只能在父组件下面-->
<item></item>
<item></item>
<item></item>
<item></item>
</div>
</template>
<!--子组件-->
<template id="item">
<div>
<img src="img/1.png">
<br/>
<span>首页</span>
</div>
</template>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{},
// 定义组件
components:{
// 父组件
"tabbar":{
template:"#footer",
components: {
"item":{
template: "#item"
},
},
},
},
})
</script>
</html>
vue简学之路(案例六)组件复用
最新推荐文章于 2024-01-08 20:44:45 发布