vue中solt插槽的基本使用

最新推荐文章于 2024-04-02 16:07:42 发布

nanzai11111

最新推荐文章于 2024-04-02 16:07:42 发布

阅读量353

点赞数

分类专栏： vue学习心得文章标签： vue.js

本文链接：https://blog.csdn.net/nanzai11111/article/details/109096939

版权

vue学习心得专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  第二步：要使用这个插槽的话就直接在组件的标签里面嵌套在插槽里面放什么内容就可以了-->

<!--
 但是你整体看的时候发现其实只是小部分不一样的，大部分都是显示按钮的时候
      就可以在创建插槽的时候给一个默认值，当不给插槽中放东西的时候就会直接显示默认的内容了
      当给了插槽显示的东西，默认值就会被覆盖。
      这样就减少了代码的冗余性。
-->
  <cpn><button>按钮</button></cpn>
  <cpn><span>我是文本</span></cpn>
  <cpn><i>我是i标签</i></cpn>
  <cpn></cpn>
  <cpn></cpn>

  <cpn>
<!--  插槽的用法2  像下面这种情况的话他就会将所有内容替换到插槽中，不存在覆盖的问题-->
    <i>我是i标签</i>
    <div>我是div标签</div>
    <p>我是p标签</p>
  </cpn>
  <cpn><button>按钮</button></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件，哈哈哈</p>
    <!--这是插槽：就是预留空间，在每次使用的时候需要往这个预留空间里面放到底需要显示的是什么。
    他的作用就是：
    1、是我们的组件更加具有扩展性
    2、让使用者可以决定组件内部的一些内容到底显示一些什么-->

<!--    第一步就是要组件中创建一个这样的插槽的标签-->
<!--    <slot></slot>-->
<!--  插槽的用法1  这里的插槽就是设置了默认值-->
    <slot><button>按钮</button></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊！！！'
    },
    components:{
      cpn:{
        template:`#cpn`
      }
    }
  })
</script>
</body>
</html>

nanzai11111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中solt插槽的基本使用

<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- 但是你整体看的时候发现其实只
复制链接

扫一扫