AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue学习第十一章（组件开发2）

2024-11-22 8
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 欢迎来到我的博客，我是瑞雨溪，一名自学前端两年半的大一学生，专注于JavaScript与Vue。本文介绍Vue中的插槽（slot）使用方法，包括基本插槽、具名插槽及作用域插槽，帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助，请关注我，持续更新中！🎉🎉🎉

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

@[toc]

1. slot-插槽的基本使用

​ 我们在使用组件的时候有时候希望，在组件内部定制化内容，例如京东这样。

这两个都是导航栏，组件的思想是可以复用的，把这个导航栏看做一个组件。

这个组件都可以分成三个部分，左边中间右边，如果可以分割组件，就可以定制化组件内容了。

  <!-- 父组件 -->
  <div id="app">

    <cpn></cpn>
    <cpn>
      <span style="color:red;">这是插槽内容222</span>
    </cpn>
    <cpn>
      <i style="color:red;">这是插槽内容333</i>
    </cpn>
    <cpn></cpn>

  </div>

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <div>
        {
  {message}}
      </div>
      <!-- 插槽默认值 -->
      <slot><button>button</button></slot>
    </div>
  </template>

  <script src="../js/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          message: "我是子组件"
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          message: "我是父组件消息"
        }
      },
      components: {
    
        cpn
      },
    })
  </script>

简单使用插槽，定义template时候使用slot

  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <div>
        {
  {message}}
      </div>
      <!-- 插槽默认值 -->
      <slot><button>button</button></slot>
    </div>
  </template>

插槽可以使用默认值，<button>button</button>就是插槽的默认值。

<cpn></cpn>
<cpn><span style="color:red;">这是插槽内容222</span></cpn>

使用插槽，<span style="color:red;">这是插槽内容222</span>将替换插槽的默认值

上述代码结果如图所示

替换了两次插槽，两次未替换显示默认的button。

如果想实现组件分成三部分就可以使用三个<slot></slot>来填充插槽了。

2. slot-具名插槽的使用

​ 具名插槽，就是可以让插槽按指定的顺序填充，而没有具名的插槽是按照你填充的顺序排列的，而具名插槽可以自定义排列。

<!-- 父组件 -->
  <div id="app">

    <cpn>
      <span>具名插槽</span>
      <span slot="left">这是左边具名插槽</span>
      <!-- 新语法 -->
      <template v-slot:center>这是中间具名插槽</template>
      <!-- 新语法缩写 -->
      <template #right>这是右边具名插槽</template>


    </cpn>


  </div>

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>

      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
      <slot>没有具名的插槽</slot>
    </div>
  </template>

  <script src="../js/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          message: "我是子组件"
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          message: "我是父组件消息"
        }
      },
      components: {
    
        cpn
      },
    })
  </script>

如图所示

没有具名的插槽排在最后，因为在定义组件的时候，排在了最后，如果有多个按顺序排列。具名插槽按照自定义的顺序排列。

定义具名插槽，使用name属性，给插槽定义一个名字。

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
      <slot>没有具名的插槽</slot>
    </div>
  </template>

使用具名插槽，在自定义组件标签内使用slot="left"，插入指定插槽

  <!-- 父组件 -->
  <div id="app">
    <cpn>
      <span>具名插槽</span>
      <span slot="left">这是左边具名插槽</span>
      <!-- 新语法 -->
      <template v-slot:center>这是中间具名插槽</template>
      <!-- 新语法缩写 -->
      <template #right>这是右边具名插槽</template>
    </cpn>
  </div>

注意：此处有是三种写法，获取指定插槽。

3. 编译的作用域

​ 前面说过组件都有自己的作用域，自己组件的作用在自己组件内。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>编译的作用域</title>
</head>
<body>
  <!-- 父组件 -->
  <div id="app">
    <!-- 使用的vue实例作用域的isShow -->
    <cpn v-show="isShow"></cpn>
  </div>
<!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <p>哈哈哈</p>
      <!-- 组件作用域，使用的子组件的作用域 -->
      <button v-show="isShow"></button>
    </div>
  </template>

  <script src="../js/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          isShwo:false
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          message: "我是父组件消息",
          isShow:true
        }
      },
      components: {
    
        cpn
      },
    })
  </script>
</body>

</html>

结果如下

子组件使用的是子组件的isShow，子组件为false，所以button没显示，被隐藏。

4. 作用域插槽案例

​ 父组件替换插槽的标签，但是内容是由子组件来提供。

​ 当组件需要在多个父组件多个界面展示的时候，将内容放在子组件插槽中，父组件只需要告诉子组件使用什么方式展示界面。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作用域插槽案例</title>
</head>

<body>


  <!-- 父组件 -->
  <div id="app">
    <cpn></cpn>
    <!-- 目的是获取子组件数据 -->
    <cpn>
      <!-- 2.5以下必须使用template -->
      <template slot-scope="slot">
        <!-- <span v-for="(item, index) in slot.data" :key="index">{
   {item}}-</span> -->
        <span>{
  {slot.data.join(' - ')}}</span>
      </template>
    </cpn>
    <cpn>
        <!-- 2.5以下必须使用template -->
        <template slot-scope="slot">
          <!-- <span v-for="(item, index) in slot.data" :key="index">{
   {item}}*</span> -->
          <span>{
  {slot.data.join(' * ')}}</span>
        </template>
      </cpn>
  </div>

<!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <slot :data="pLanguage">
          <ul>
              <li v-for="(item, index) in pLanguage" :key="index">{
  {item}}</li>
            </ul>
      </slot>

    </div>
  </template>

  <script src="../js/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          isShwo:false,
          pLanguage:['JavaScript','Java','C++','C']
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          isShow:true
        }
      },
      components: {
    
        cpn
      },
    })
  </script>
</body>

</html>

组件中使用slot-scope="slot"（2.6.0已经废弃）给插槽属性命名，在通过slot调用绑定在插槽上的属性。也可以使用v-slot="slot"。

Hi👋,这里是瑞雨溪一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉

文章标签：
JavaScript
前端开发
游客ady5kpv352g3u
目录
相关文章
hhzz
|
6月前
|
存储 缓存 JavaScript
【vue的技术要点】
【vue的技术要点】
hhzz
88 0
游客ady5kpv352g3u
|
2天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
游客ady5kpv352g3u
7 1
vue学习第十章(组件开发）
游客ady5kpv352g3u
|
2天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
游客ady5kpv352g3u
11 1
vue学习第四章
游客ady5kpv352g3u
|
2天前
|
JavaScript 前端开发
vue学习第五章
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，正向全栈进发。如果你从我的文章中受益，欢迎关注，我将持续分享更多优质内容。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
13 1
王同学睡醒了
|
6月前
|
JavaScript
【Vue2.0学习】—组件（五十一）
【Vue2.0学习】—组件（五十一）
王同学睡醒了
32 1
【Vue2.0学习】—组件（五十一）
陌上少年，且听这风吟
|
JavaScript 前端开发 索引
如何快速上手Vue框架?（中）
如何快速上手Vue框架?（中）
陌上少年，且听这风吟
84 0
陌上少年，且听这风吟
|
JavaScript 开发者
如何快速上手Vue框架?（下）
如何快速上手Vue框架?（下）
陌上少年，且听这风吟
68 0
陌上少年，且听这风吟
|
JavaScript
如何快速上手Vue框架?（上）
如何快速上手Vue框架?（上）
陌上少年，且听这风吟
72 0
程序员王天
|
缓存 JavaScript 前端开发
【vue入门手册】六、组件高阶
【vue入门手册】、组件高阶
程序员王天
118 0
游客ekifwqb233tlk
|
JavaScript 前端开发 网络安全
Vue 进阶必学之高阶组件 HOC
高阶组件这个概念在 React 中一度非常流行，但是在 Vue 的社区里讨论的不多，本篇文章就真正的带你来玩一个进阶的骚操作。
游客ekifwqb233tlk
370 0