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>
相关推荐
鸿蒙布道师6 分钟前
OpenAI战略转向:开源推理模型背后的行业博弈与技术趋势
人工智能·深度学习·神经网络·opencv·自然语言处理·openai·deepseek
小白的高手之路32 分钟前
torch.nn.Conv2d介绍——Pytorch中的二维卷积层
人工智能·pytorch·python·深度学习·神经网络·机器学习·cnn
船长@Quant35 分钟前
PyTorch量化进阶教程:第五章 Transformer 在量化交易中的应用
pytorch·python·深度学习·transformer·量化交易·sklearn·ta-lab
拉不动的猪1 小时前
vue与react的简单问答
前端·javascript·面试
污斑兔1 小时前
如何在CSS中创建从左上角到右下角的渐变边框
前端
星空寻流年1 小时前
css之定位学习
前端·css·学习
liruiqiang051 小时前
循环神经网络 - 通用近似定理 & 图灵完备
人工智能·rnn·深度学习·神经网络·机器学习
hunteritself2 小时前
DeepSeek重磅升级,豆包深度思考,ChatGPT原生生图,谷歌Gemini 2.5 Pro!| AI Weekly 3.24-3.30
人工智能·深度学习·chatgpt·开源·语音识别·deepseek
旭久2 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js