vue简学之路（案例六）组件复用

最新推荐文章于 2024-01-08 20:44:45 发布

健身小白

最新推荐文章于 2024-01-08 20:44:45 发布

阅读量283

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44014971/article/details/103839207

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!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>

健身小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue简学之路（案例六）组件复用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件定义</title> <script src="vue.js"></script></head><body&g...
复制链接

扫一扫