Vue 内置组件 -slot讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 内置组件 -slot讲解</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue 内置组件 -slot讲解</h1>
<hr>
<div id="app">
    <whl>
         <span slot="bolgUlr">{{whlData.bolgUlr}}</span>
        <span slot="netName">{{whlData.netName}}</span>
        <span slot="skill">{{whlData.skill}}</span>
    </whl>
</div>
<template id="tep">
    <!--vue 模板 必须有个大的容器包含着 才能显示完整-->
    <div>
        <p>博客地址: <slot name="bolgUlr"></slot> </p>
        <p>网名:<slot name="netName"></slot></p>
        <p>所会技术:<slot name="skill"></slot></p>
    </div>

</template>
</body>
</html>
<script>
  var whl={
      template:"#tep"
  }
    var app = new Vue({
        el:'#app',
        data:{
            whlData:{
                bolgUlr:'https://blog.csdn.net/drug_',
                netName:'whl',
                skill:'web前端'
            }
        },
        components:{
            'whl':whl,

        }

    })
</script>