这个vue语法是什么?

image.png

这个语法是什么?

回答:

作用域插槽,已经废弃了,但还未移除。
现在使用v-slot。

插槽其实其实就是定义组件模板的时候,提供的一个占位组件,我们可以给这个插槽组件传递参数,在父组件使用这个组件的时候就可以访问这些参数。
比如子组件:
child.vue

<template>
    <slot label="hello">
    </slot>
</template>

父组件:

<template>
    <child>
          <div slot-scope="{ label }">{{ label }}</div>
    </child>
</template>

也可以写 slot-scope=”props” 然后props.label访问,slot-scope=”{ label }”这个是解构的语法。

当然,以上是废弃的用法,现在使用v-slot=”{ label }”

回答:

这是对象解构过的.
摘自vue官网

slot-scope 的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式。这意味着在支持的环境下 (单文件组件或现代浏览器),你也可以在表达式中使用 ES2015 解构,如下:

<slot-example>
  <span slot-scope="{ msg }">
    {{ msg }}
  </span>
</slot-example>

简单来说就是你需要option这个对象,而slot-scope接收的是一个对象,这个对象含有一个属性option,解构赋值,就可以拿到这个option对象的变量

回答:

slot-scope 在2.5+ 已经被废弃了。主要作用是 用于将元素或组件表示为作用域插槽。替换之后的 v-slot,具体可以看下官网文档:https://cn.vuejs.org/v2/api/#…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注