内置组件 -slot讲解

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

 

posted @ 2018-02-28 23:43  Jinsuo  阅读(445)  评论(0编辑  收藏  举报