slot插槽

最新推荐文章于 2022-04-17 16:50:34 发布

G018_star sky♬

最新推荐文章于 2022-04-17 16:50:34 发布

阅读量71

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42526440/article/details/114955687

版权

vue.js 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--
1.插槽的基本使用 <slot></slot>
2.插槽的默认值 <slot>button</slot>
3.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
-->

<div id="app">
  <cpn></cpn>   //显示模板内容

  <cpn><span>哈哈哈</span></cpn> //未显示slot

  <cpn><i>呵呵呵</i></cpn>   //未显示slot

  <cpn>             //未显示slot
    <i>呵呵呵</i>      
    <div>我是div元素</div>
    <p>我是p元素</p>
  </cpn>

  <cpn>{{message}}</cpn>  //未显示slot  

  <cpn></cpn>   //以下三个显示slot
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件, 哈哈哈</p>
    <slot><button>按钮++</button></slot>
    <!--<button>按钮</button>-->
  </div>
</template>

<script src="../vue/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

G018_star sky♬

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slot插槽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1.插槽的基本使用 <slot></slot>2.插槽的默认值 <slot>button</slot>3.如果有多个值, 同时放入到组件进行
复制链接

扫一扫