vue的作用域插槽_JavaScript_论坛

vue的作用域插槽

37***53 分类：JavaScript 人气：1218 回帖：3 发布于6年前收藏

官网的案例看过了实际项目中的应用场景有哪些

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：

<div class="child">  <slot text="hello from child">slot> div>

在父级中，具有特殊特性 slot-scope 的元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：

<div class="parent">  <child>  <template slot-scope="props">  <span>hello from parentspan>  <span>{{ props.text }}span>  template>  child> div>

如果我们渲染上述模板，得到的输出会是：

<div class="parent">  <div class="child">  <span>hello from parentspan>  <span>hello from childspan>  div> div>

标签：vue

Lv1 新人

37***53 职业无 6年前#1

一般用在什么地方

Lv2 入门

wx***05 职业无 1年前#2

有用

Lv1 新人

qq***33 职业无 10月前#3

有点东西

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取