美文网首页
推陈出新,v-slot的用法

推陈出新,v-slot的用法

作者: 似朝朝我心 | 来源:发表于2020-10-20 12:22 被阅读0次

前言:最近在学vue,发现slot插槽已经在vue2.6就被舍弃了,新增了v-slot用法,去看了官网实在没看懂如何上手,特此写了这个,方便小白一看就懂。

子组件使用插槽给父组件预留施展空间。

  • 具名插槽命名方式还和以前一样写。


父组件使用子组件预留出来的插槽空间,控制子组件并向子组件输入内容。


使用注意事项:
  • 插槽里面的<template></template>标签必须必须得有,且要搭配v-slot使用,其他标签搭配v-slot是不行的。
  • 在插槽里,只能是template标签的内部包含其它标签,(比如我这里截图的,template标签包含着一个<div>你好</div>),如果用div包裹template是不行的。
  • 它还有个语法糖简写形式,v-slot:name等价于#name,也就是用一个#号代替v-slot:

相关文章

  • 推陈出新,v-slot的用法

    前言:最近在学vue,发现slot插槽已经在vue2.6就被舍弃了,新增了v-slot用法,去看了官网实在没看懂如...

  • vue slot插槽

    v-slot 插槽的用法: 单个slot内容时: 子组件: 父组件: 多个slot内容时(具名插槽): 子组件: ...

  • 【vue学习】slot

    在 2.6.0引入 v-slot指令【缩写为#】 提示:v-slot can only be used on co...

  • error 'tag' property on 'router

    主要原因:vue-routerv3.1.x以上版本,新增“v-slot”,推荐使用‘custom v-slot’代...

  • slot 插槽 、 provide、工具函数写法

    vue v2.6中,引入了v-slot,它取代了slot和slot-scope,v-slot限用于template...

  • vue 2.6 插槽更新 v-slot 用法总结

    在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 sl...

  • Vue 3.0 & Vue 2.6+ 你需要知道的 v-slot

    Vue.js 你需要知道的 v-slot (译) 面试官:谈谈 v-slot 的作用? 自己先想一分钟。 这篇文章...

  • VUE-学习

    记录一些容易忘记的知识点 v-slot 在vue v2.6.0中,新引入了v-slot指令,他取代了slot和sl...

  • vue 插槽

    父组件 searchTo...

  • Android主流网络框架

    Android发展到目前,网络框架推陈出新,目前主要有四大成熟的框架,本文简要分析各大框架的实现原理。具体的用法可...

网友评论

      本文标题:推陈出新,v-slot的用法

      本文链接:https://www.haomeiwen.com/subject/opfdmktx.html