[102-104]_Vue插槽

最新推荐文章于 2024-01-25 12:38:57 发布
最新推荐文章于 2024-01-25 12:38:57 发布
阅读量576 收藏
点赞数
分类专栏： Vue学习笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gty204625782/article/details/121692546
版权

文章目录

（一）默认插槽

App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>

    <Category title="游戏">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>

    <Category title="电影">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category'
  export default {
    name: 'App',
    components: {
      Category
    },
    data() {
      return {
        foods: ['火锅', '烧烤', '小龙虾', '牛排'],
        games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
        films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》']
      }
    }
  }
</script>

<style scoped>
  .container {
    display: flex;
    justify-content: space-around;
  }
</style>

组件Category.vue

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>

<script>
  export default {
    name: 'Category',
    props: ['title']
  }
</script>

<style scoped>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }

  h3 {
    text-align: center;
    background-color: orange;
  }

  video {
    width: 100%;
  }

  img {
    width: 100%;
  }
</style>

（二）具名插槽

App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="http://www.atguigu.com">更多美食</a>
    </Category>

    <Category title="游戏">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="http://www.atguigu.com">单机游戏</a>
        <a href="http://www.atguigu.com">网络游戏</a>
      </div>
    </Category>

    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.atguigu.com">经典</a>
          <a href="http://www.atguigu.com">热门</a>
          <a href="http://www.atguigu.com">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category'
  export default {
    name: 'App',
    components: {
      Category
    },
    data() {
      return {
        foods: ['火锅', '烧烤', '小龙虾', '牛排'],
        games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
        films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》']
      }
    }
  }
</script>

<style scoped>
  .container,
  .foot {
    display: flex;
    justify-content: space-around;
  }

  h4 {
    text-align: center;
  }
</style>

组件Category.vue

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
    <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
    <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
  </div>
</template>

<script>
  export default {
    name: 'Category',
    props: ['title']
  }
</script>

<style scoped>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }

  h3 {
    text-align: center;
    background-color: orange;
  }

  video {
    width: 100%;
  }

  img {
    width: 100%;
  }
</style>

（三）作用域插槽

App.vue

<template>
  <div class="container">

    <Category title="游戏">
      <template scope="atguigu"><!--对象-->
        <ul>
          <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template scope="{games}"><!--解构赋值-->
        <ol>
          <li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <template slot-scope="{games}"><!--解构赋值-->
        <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
      </template>
    </Category>

  </div>
</template>

<script>
  import Category from './components/Category'
  export default {
    name: 'App',
    components: {
      Category
    }
  }
</script>

<style scoped>
  .container,
  .foot {
    display: flex;
    justify-content: space-around;
  }

  h4 {
    text-align: center;
  }
</style>

组件Category.vue

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <slot :games="games" msg="hello">我是默认的一些内容</slot>
    <!--
    这里传了两个值，games和msg，但最终传到此组件的使用者手中时变成了一个对象，
    在使用者手中可以用ES6的解构赋值来取数据
    -->
  </div>
</template>

<script>
  export default {
    name: 'Category',
    props: ['title'],
    data() {
      return {
        games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
      }
    }
  }
</script>

<style scoped>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }

  h3 {
    text-align: center;
    background-color: orange;
  }

  video {
    width: 100%;
  }

  img {
    width: 100%;
  }
</style>

总结

  • 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件
  • 分类：默认插槽、具名插槽、作用域插槽
  • 使用方式：

（1）默认插槽：

父组件中：
<Category>
	<div>html结构</div>
</Category>


子组件中：
<template>
  <div>
    <!-- 定义插槽 -->
    <slot>插槽默认内容...</slot>
  </div>
</template>

（2）具名插槽：

父组件中：
<Category>
	<template slot="center">
	  <div>html结构1</div>
	</template>

	<template v-slot:footer>
	  <div>html结构2</div>
	</template>
</Category>


子组件中：
<template>
  <div>
    <!-- 定义插槽 -->
    <slot name="center">插槽默认内容...</slot>
    <slot name="footer">插槽默认内容...</slot>
  </div>
</template>

（3）作用域插槽：

  • 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者（用<template>标签接收数据）来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
  • 具体编码：
父组件中：
<Category title="foods"><!--父向子传字符串-->
  <template scope="data"><!--父接收子传来的数据(是一个对象)-->
    <ul>
      <li v-for="(item, index) in data.foods" :key="index">{{ item }}</li>
    </ul>
  </template>
</Category>

<Category title="games"><!--父向子传字符串-->
  <template slot-scope="{games}"><!--解构赋值来收指定数据-->
    <ul>
      <li v-for="(item, index) in games" :key="index">{{ item }}</li>
    </ul>
  </template>
</Category>



子组件中：
<template>
  <div>
    <h1>标题:{{ title }}</h1>
    <slot :foods="foods" :games="games"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ['title'],
  data() {
    return {
      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽']
    }
  }
}
</script>
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-slot-demo:vue插槽的用法
03-09
插槽演示项目设置yarn install编译和热重装以进行开发yarn run serve编译并最小化生产yarn run build运行测试yarn run test整理和修复文件yarn run lint自定义配置请参阅。
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2043
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
前端基础学习——Vue框架-AJAX的使用
weixin_53919192的博客
07-14 5848
本文为大家介绍了前端基础学习——Vue框架-AJAX的使用，希望对你有帮助~~
Vue中使用ajax技术
m0_62475892的博客
04-10 3670
Vue自学笔记
Vue——Ajax介绍以及案例和Axios使用
测试
03-22 2677
在客户端向服务器发送请求之后，直到服务器处理后逻辑产生响应之后客户端才能执行其他操作。比如在搜索框内输入一个网站的网址访问后，只有整个html页面加载出来了，但是点击任何一个地方都没法跳转，只有整个页面完全加载完成，在服务器端响应完成之后，在网页上的操作才会有反应。
vue与Ajax
Yjh_pythonking的博客
08-29 3512
1.VUE 以前说过了vue的安装配置以及基本结构，今天来说一下它的基本操作 1.1 MVVM思想 首先要说的就是它的一个重要思想MVVM的思想 M: model 数据层 V: view 视图层 VM: 视图数据的控制层 流程: 1. Model变化, 虚拟DOM操作内存数据变化. 所以页面变化. 2. View变化, 虚拟DOM操作内存数据变化, 数据变化. 1.2 var/let/const var 没有作用域的概念 容易出现安全性问题. 成员变量 let 作用于var类似, 有作.
Vue_ElementUI-ING-2021_01:Vue＆ElementUI
03-08
Vue_ElementUI 1_vue简介 2_第1个vue应用程序 3_vue实例对象和生命周期 4_vue生命周期 5_vue模板 6_计算属性 7_v-for渲染 8_摘要更新检测 9_条件渲染 10_事件处理 11_事件对象 12_表单处理 13_实战练习1 14_实战...
vue3-treeselect:vue 3的树选择组件（下一个）
04-13
从他的资料库中取得重大变化： 属性value => modelValue 事件input => updated:modelValue 现在将插槽与特征带有嵌套选项的单选和多选支持模糊匹配异步搜索延迟加载（仅在需要时加载深度选项的数据） 键盘支持...
Vue作用域插槽slot-scope实例代码
10-18
主要介绍了Vue作用域插槽slot-scope实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-slot-test：Vue cli插槽测试
02-11
project02 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
学习笔记之Vue中的Ajax（四）
YING—country的博客
02-26 1699
学习Vue中的Ajax
Vue Ajax请求
XWenXiang的博客
06-28 4209
前端发送 Ajax
【Vue】学习笔记-Vue中的Ajax配置代理
德仔
05-27 1234
vue.config.js 是一个可选的配置文件，如果项目的(和package.json同级的)根目录中存在这个文件，那么它会被@vue/cli-service 自动加载。当我们向服务器请求学生信息的时候，我们不直接请求服务器，而是找代理服务器，代理服务器收到了我们本次请求之后，他会帮我们把请求转发给服务器。​​同时服务器也会把数据交给本地浏览器​​​。也就是说代理服务器是想要服务器上的​​/api1/students​​​数据，但我们的本意是要​​/students​​的数据。
Vue进阶：Vue中的ajax请求
最新发布
做一只猫的博客
01-25 1450
理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（games数据在Category（子）组件中，但使用数据所遍历出来的结构由App（父）组件决定）在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。为什么在Actions 中给的是 context(上下文)，明明只需要进行commit操作，为啥不直接给一个commit就可以了。一、Vue中的ajax请求。
Vue中的Ajax
qq_56444564的博客
05-22 1124
vue脚手架配置代理服务器：方法一：在中添加如下配置： 说明： 方法二： 说明：下载一下所需要的课件资料： vue脚手架配置代理服务器方法一：启动server1,server2App.vue vue.config.js 运行结果：什么是跨域问题？如何解决跨域问题？ vue脚手架配置代理服务器方法二：启动server1,server2App.vue vue.config.js main.js 运行结果：2.GitHub用户搜索案例App.vue main.js Lis
浅谈使用ajax和vue实现前后端分离
qq_35068677的博客
01-16 3089
利用ajax和vue实现前后端分离
vue的ajax是什么？
CS_DGD的博客
05-14 920
vue的ajax与我们的以前接触到的ajax作用是一致的，都是用来传递参数的，我们先来简单了解一下他在vue中的写法 通过代码来看 created() { let url = `https://api.github.com/search/repositories?q=${this.queryName}`; // GET 的请求方式 axios .get(url) .then( // 请求成功 response =>
Vue中的ajax
weixin_45773069的博客
10-04 253
引入 import axios from 'axios'
vue的ajax有几种方法,在 Vue 中使用 Ajax 的几种姿势
weixin_42498981的博客
08-05 8736
作为一名前端开发人员, 使用 Vue 也有一段时间了, 刚好有时间来总结一下在 Vue 中使用 Ajax 的一些方式不同的方式有各自的优点和缺点, 这篇文章将会简单地阐述一下主要的几种方式注入 Vue 根实例组件中直接使用利用 Vuex 中的 actionsVue-router 路由导航守卫注入 Vue 根实例记得 Vue 刚发布 2.0 的时候, 那时候还有一个挺活跃的库, 叫做 vue-res...
ant-design-vue 插槽写法
08-16
在 Ant Design Vue 中，插槽的写法略有不同。Ant Design Vue 提供了一些组件，例如 `<a-button>` 和 `<a-modal>`，可以使用插槽来自定义组件的内容。 下面是一个示例，展示了如何使用插槽来自定义 `<a-button>` 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值