Vue 内置组件 -slot讲解

xml 复制代码
<!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>
相关推荐
小小小小宇43 分钟前
手写 zustand
前端
Hamm1 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇2 小时前
前端国际化看这一篇就够了
前端
大G哥2 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext2 小时前
html初识
前端·html
小小小小宇2 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827522 小时前
vue中 vue.config.js反向代理
前端
Java&Develop2 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk3 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务
契合qht53_shine3 小时前
深度学习 视觉处理(CNN) day_02
人工智能·深度学习·cnn