专栏首页前端知否如何在Vue中使用更复杂的插槽

如何在Vue中使用更复杂的插槽

Vue.js是一个易于使用的Web应用程序框架,可用于开发交互式前端应用程序。

在本文中,我将介绍命名插槽和作用域插槽。

命名插槽

有时我们的模板中会有多个插槽。为了区分每个插槽,我们必须给它们命名。

我们可以使用name属性定义具有命名插槽的组件,如下所示:

Vue.component("layout", {  template: `    <div>      <header>            <slot name="header"></slot>      </header>      <main>              <slot></slot>      </main>      <footer>              <slot name="footer"></slot>      </footer>    </div>  `});

然后我们可以将上述组件一起使用,如下所示:

src/index.js:

Vue.component("layout", {  template: `  <div>    <header>          <slot name="header"></slot>    </header>    <main>            <slot></slot>    </main>    <footer>            <slot name="footer"></slot>    </footer>  </div>  `});
new Vue({  el: "#app"});

index.html:

<!DOCTYPE html><html>  <head>    <title>App</title>    <meta charset="UTF-8" />    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  </head>  <body>    <div id="app">      <layout>        <template v-slot:header>          <h1>Header</h1>        </template>        <p>Main</p>        <template v-slot:footer>          <p>Footer</p>        </template>      </layout>    </div>    <script src="src/index.js"></script>  </body></html>

填充具有header名称的插槽:

<template v-slot:header>   <h1>Header</h1></template>

填充具有footer名称的插槽:

<template v-slot:footer>   <p>Footer</p></template>

填充没有名称的插槽:

<p>Main</p>

我们还可以使用v-slot:default填充没有名字的默认插槽,如下所示:

<template v-slot:default>  <p>Main</p></template>

无论哪种方式,渲染出来的HTML都是相同的。

作用域插槽

我们可以使用作用域插槽来访问子组件中的数据。

为了使子组件中的数据在父组件中可用,我们可以使用v-bind指令。

一个简单的示例,从父级去获取子级组件数据如下:

src/index.js:

Vue.component("user", {  data() {    return {      user: {        firstName: "Joe",        lastName: "Smith"      }    };  },  template: `<p>    <slot v-bind:user="user"></slot>  </p>`});
new Vue({  el: "#app"});

index.html:

<!DOCTYPE html><html>  <head>    <title>App</title>    <meta charset="UTF-8" />    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  </head>  <body>    <div id="app">      <user>        <template v-slot:default="slotProps">          {{ slotProps.user.firstName }}        </template>      </user>    </div>    <script src="src/index.js"></script>  </body></html>

在上面的代码中,我们设置了子组件上的插槽数据:

<p>   <slot v-bind:user="user"></slot></p>

在根Vue实例中就可以使用user了。

然后在根模板中,我们可以这样使用user

<user>  <template v-slot:default="slotProps">    {{ slotProps.user.firstName }}  </template></user>

通过slotProps访问用户的数据,slotProps可以访问子组件中的v-bind提供的所有数据。

单独默认插槽的缩写语法

如果只有一个默认插槽,那么我们可以直接在子组件上使用v-slot:defaultv-slot,如下所示:

<user v-slot:default="slotProps">   {{
<user v-slot="slotProps">   {{ slotProps.user.firstName }}</user>

如果还有其他命名的插槽,则可能存在歧义,因此无法使用上述语法。

如果我们有多个插槽,那么我们必须老老实实编写如下内容:

src/index.js:

Vue.component("user", {  data() {    return {      user: {        firstName: "Joe",        lastName: "Smith"      }    };  },  template: `<p>    <slot v-bind:user="user" name='first-name'></slot>    <slot v-bind:user="user" name='last-name'></slot>  </p>`});
new Vue({  el: "#app"});

index.html:

<!DOCTYPE html><html>  <head>    <title>App</title>    <meta charset="UTF-8" />    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  </head>  <body>    <div id="app">      <user>        <template v-slot:first-name="slotProps">          {{ slotProps.user.firstName }}        </template>        <template v-slot:last-name="slotProps">          {{ slotProps.user.lastName }}        </template>      </user>    </div>    <script src="src/index.js"></script>  </body></html>

在上面的代码中,我们必须明确命名插槽,然后才能分别通过v-slot:first-name="slotProps"v-slot:last-name="slotProps"访问子组件的数据。

另外,我们将插槽内容包装在template中。

解构作用域插槽数据

我们可以使用解构赋值运算符来解构插槽作用域数据。

例如,我们可以按以下方式使用它:

src/index.js:

Vue.component("user", {  data() {    return {      user: {        firstName: "Joe",        lastName: "Smith"      }    };  },  template: `<p>    <slot v-bind:user="user" name='first-name'></slot>    <slot v-bind:user="user" name='last-name'></slot>  </p>`});
new Vue({  el: "#app"});

index.html:

<!DOCTYPE html><html>  <head>    <title>App</title>    <meta charset="UTF-8" />    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  </head>  <body>    <div id="app">      <user>        <template v-slot:first-name="{ user }">          {{ user.firstName }}        </template>        <template v-slot:last-name="{ user }">          {{ user.lastName }}        </template>      </user>    </div>    <script src="src/index.js"></script>  </body></html>

在上面的代码中,我们没有使用slotProps,而是将其更改为{ user }{ user }slotProps.user相同。

最后

我们可以使用命名插槽和作用域插槽创建多个插槽,并分别从父级的子级组件中去访问数据。

命名插槽可防止歧义,并允许我们使用多个插槽。

另外,我们可以在子组件中使用v-bind,然后在组件中使用slotProps从父组件访问子组件的数据。

本文分享自微信公众号 - 前端知否(qianduanzhifou),作者:QETHAN

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js应用性能优化三

    在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码。虽然按照路由拆分代码非常有用,但在用户访问我们...

    前端知否
  • Flutter必备语言Dart教程03 - 类,泛型

    上篇中我们学习了Flutter必备语言Dart教程02 - 控制流,异常,现在我们继续学习Dart中的类和泛型。

    前端知否
  • 构建Vue.js组件的10个技巧

    Vue.js提供了两种加载组件的方法:一种在Vue实例全局,另一种在组件级别。两种方法都有其自身的优点。

    前端知否
  • vue 2.6以上 v-slot的改变为你带来更加明确的代码

    转自vue官方文档 https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽

    yangdongnan
  • Vue插槽详解 | 什么是插槽?

    什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分发内容的出口...

    达达前端
  • easyswoole反向代理实现

    由于 Swoole Server 对 HTTP 协议的支持并不完整,建议仅将 EasySwoole 作为后端服务,并且在前端增加 NGINX 或 APACHE ...

    仙士可
  • 3.4.2 单帧滑动窗口与停止等待协议

    在停止等待协议中,源站发送单个帧后必须等待确认,在目的站的回答到达源站之前,源站不能发送其他的数据帧。从滑动窗口机制的角度看,停止等待协议相当于发送窗口和接受窗...

    week
  • Nginx Proxy 知识点解析

    区别只在于proxy_pass转发的路径后是否带 “/”, - 针对不带/, 假如我们访问的url=http://www.abc.com/testa/test....

    用户1560186
  • 爬虫(102)年少遇她误终身?

    你是否曾经遇到那个她?让你至今难忘,却又错过了?如果有,小编今天就教了爬取她的QQ空间的说说,如果没有,那也没有关系,小编我陪你哈哈,那你可以爬取你自己的QQ空...

    公众号---志学Python
  • 探讨一些在机器学习上对你有影响的问题

    在自学机器学习上,一般人很难保持足够的动力持续下去。标准的测试数据往往是非常枯燥的,并且可能与你和你的日常生活毫不相干,甚至可以说是无聊至极。在你看来,你想要的...

    KX_WEN

扫码关注云+社区

领取腾讯云代金券