Using V-slot slot in vuetify

1wo6kipk 2020-11-11 15:59:20
using v-slot slot slot vuetify


brief introduction

Vue since 2.6.0 The release began to introduce a new unified syntax for named slots and scoped slots ( namely v-slot Instructions ). It replaces slot and slot-scope These two are currently obsolete but not removed and are still in the document attribute.
in short , The main purpose of the introduction of slot technology is to undertake “ Place holder ”(placeholder) The role of . I believe many friends are familiar with “ Place holder ” The concept , That is, in the construction UI Or to achieve a function without giving a specific implementation scheme, first use a simplest content to replace , And not to compile and so on the process of syntax errors or try to avoid embarrassment . Please refer to the following brief examples provided by the government :

Sometimes a specific backup is set for a slot ( Which is the default ) The content is very useful , It will only be rendered when no content is provided . For example, in a <submit-button> In the component :


<button type="submit">
<slot></slot>
</button>

We might want this <button> In most cases, the text is rendered in “Submit”. In order to “Submit” As back-up content , We can put it in <slot> tag :

<button type="submit">
<slot>Submit</slot>
</button>

Now when I use... In a parent component <submit-button> And does not provide any slot content :


<submit-button></submit-button>

Back up content “Submit” Will be rendered :

<button type="submit">
Submit
</button>

But if we provide content :


<submit-button>
Save
</submit-button>

Then the provided content will be rendered to replace the backup content :

<button type="submit">
Save
</button>

A named slot

When providing content to a named slot , We can do it in one <template> Use on element v-slot Instructions , And v-slot The form of the parameter of provides its name :

<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>

After the colon above header、footer Waiting is equivalent to 2.6 After the version of the slot name attribute .

Now? <template> Everything in the element will be passed to the corresponding slot . Anything not wrapped in a belt with v-slot Of <template> The contents in are treated as the contents of the default slot .

However , If you want to be more specific , Still can be in a <template> The contents of the default slot in the package :

<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>

【 Be careful 】 v-slot Can only be added to <template> On ( There is only one exception ), This and what has been abandoned slot attribute Different .

As a rule , please remember :

Everything in the parent template is compiled in the parent scope ; Everything in the sub template is compiled in the sub scope .

Scope slot

Sometimes it's useful to allow slot content to access data only in a subcomponent .

Binding in <slot> Element attribute go by the name of 【 slot prop】. Now in the parent scope , We can use 【 With value v-slot 】 To define the slots we provide prop Name :

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

In this case , We choose Will contain all slots prop The object of is named slotProps, But you can also use any name you like .

Abbreviation syntax for exclusive default slot

In the above case , When only the default slot is provided , The label of the component can be used as the template of the slot . So we can v-slot Use directly on components :


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

It can be simpler . Just as it is assumed that unspecified content corresponds to the default slot , No parameters v-slot Is assumed to correspond to the default slot :

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

Note that the abbreviation syntax for the default slot cannot be mixed with a named slot , Because it causes ambiguities in scope .

As long as there are multiple slots , Please always use the complete base for all slots <template> The grammar of :


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

Deconstruct slot Prop

The internal working principle of a scoped slot is to wrap the contents of the slot in a function with a single parameter :

function (slotProps) {
// Slot content 
}

It means : v-slot The value of can actually be anything that can be used as an argument in a function definition JavaScript expression . So in a supported environment ( Single file components or modern browsers ), You can also use ES2015 deconstruction To pass in the specific slot prop, as follows :

<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>

This makes the template simpler , Especially in this slot there are many prop When . It also turns on prop rename And other possibilities , For example user Rename it to person:

<current-user v-slot="{ user: person }">
{{ person.firstName }}
</current-user>

You can even define fallback content , For slots prop yes undefined The circumstances of :

<current-user v-slot="{ user = { firstName: 'Guest' } }">
{{ user.firstName }}
</current-user>

slot prop Allows us to convert slots to reusable templates , These templates can be based on input prop Render different content . This is most useful when designing reusable components that encapsulate data logic while allowing parent components to customize part of the layout .

What's next , We combine Vuetify UI Common components of the library v-menu To explore how to use in Vuetify Use in the environment v-slot.

Vuetify Use in v-slot slot

Please look at the code. ( A more complicated example , For basic examples, see the following two ):

<template>
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on: menu, attrs }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="{ ...tooltip, ...menu }"
>
Dropdown w/ Tooltip
</v-btn>
</template>
<span>Im A ToolTip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>

There is no specific explanation , Let's start with a question and answer explanation on Manon island , Even though it's English , But there's no problem for you to understand , So there is no translation here :

problem :

Looking at the Vuetify example code for v-toolbar, what is the purpose of v-slot:activator="{ on }"? For example:

<template v-slot:activator="{ on }">
<v-toolbar-title v-on="on">
<span>All</span>
<v-icon dark>arrow_drop_down</v-icon>
</v-toolbar-title>
</template>

answer

You're likely referring to this example:


<v-toolbar color="grey darken-1" dark>
<v-menu :nudge-width="100">
<template v-slot:activator="{ on }">
<v-toolbar-title v-on="on">
<span>All</span>
<v-icon dark>arrow_drop_down</v-icon>
</v-toolbar-title>
</template>
...
</v-menu>
</v-toolbar>

The following line declares a scoped slot named activator, and it is provided a scope object (from VMenu), which contains a property named on:

&lt;template v-slot:activator="{ on }"&gt;
This uses destructuring syntax on the scope object, which IE does not support.

For IE, you'd have to dereference on from the scope object itself:


<template v-slot:activator="scope">
<v-toolbar-title v-on="scope.on">

But the ideal solution IMO is to use a Vue CLI generated project, which includes a Babel preset (@vue/babel-preset-app) to automatically include the transforms/polyfills needed for the target browsers. In this case, babel-plugin-transform-es2015-destructuring would be automatically applied during the build.

Details on the activator slot
VMenu allows users to specify a slotted template named activator, containing component(s) that activate/open the menu upon certain events (e.g., click). VMenu provides listeners for those events via an object, passed to the activator slot:

<v-menu>
<template v-slot:activator="scopeDataFromVMenu">
<!-- slot content goes here -->
</template>
</v-menu>

The slot content can access VMenu's event listeners like this:


<v-menu>
<template v-slot:activator="scopeDataFromVMenu">
<button v-on="scopeDataFromVMenu.on">Click</button>
</template>
</v-menu>

For improved readability, the scoped data can also be destructured in the template:


<!-- equivalent to above -->
<v-menu>
<template v-slot:activator="{ on }">
<button v-on="on">Click</button>
</template>
</v-menu>

The listeners from the scope object are passed to the <button> with v-on's object syntax, which binds one or more event/listener pairs to the element. For this value of on:

{
click: activatorClickHandler // activatorClickHandler is an internal VMenu mixin
}
...the button's click handler is bound to a VMenu method.


Sum up ,Vuetify Several common components in (v-menu、v-tooltip and v-dialog) Use in v-slot Based on Vue Named scope slot technology in , And used ES2015( namely ES6) The grammatical “ destructor ”(destructing).

With v-menu A typical application is , It passes its own set of events and properties to <template> Internal sub components , And pass as needed v-bind and v-on Syntax maps the specific attributes and events of a child component to the corresponding property set and event set of the outer parent component .

v-slot combination v-tooltip Application

 <v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Button
</v-btn>
</template>
<span>Tooltip</span>
</v-tooltip>

v-slot combination v-dialog Application

<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red lighten-2"
dark
v-bind="attrs"
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
<v-card-title class="headline grey lighten-2">
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
@click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

Important reference

https://blog.csdn.net/weixin_44710964/article/details/107428727
https://cn.vuejs.org/v2/guide/components-slots.html
https://vuetifyjs.com/en/components/menus/#activator-and-tooltip
https://www.manongdao.com/article-1850182.html


版权声明
本文为[1wo6kipk]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple