内置组件 -slot讲解

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30254435

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/8486394.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../assets/js/flexible_css.js"></script>
    <script src="../assets/js/flexible.js"></script>
    <script src="../assets/js/jquery-3.2.1.js"></script>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <caicai>
            <span slot="url">{{caiData.url}}</span>  <!--  在组件标签里传递值-->
            <span slot="netName">{{caiData.netName}}</span>
            <span slot="skill">{{caiData.skill}}</span>
        </caicai>
    </div>
    <template id="tep">
        <div>
            <p>地址：<slot name="url"></slot></p> <!--在模版里  用slot 标签接收值-->
            <p>网名：<slot name="netName"></slot></p>
            <p>技术类型：<slot name="skill"></slot></p>
        </div>
        
    </template>
</body>
<script type="text/javascript">
    var jinsuo={  //组件模版变量
        template:"#tep"  //模版  定义在 id为tep 的html的tempalte标签里 
    }
    var app=new Vue({
            el:"#app",
            data:{
                caiData:{  //  数据对象
                    url:"http://baidu.com",
                    netName:"菜菜",
                    skill:"web前端"
                }
            },
            components:{  //组件
                "caicai":jinsuo  //caicai  组件名  jinsuo  是组件模版
            }
        })
</script>
</html>