赛捷软件论坛's Archiver

vicky.yu 发表于 2023-8-10 09:20

渲染作用域

当你想在一个插槽中使用数据时,例如:

<todo-button>
  Delete a {{ item.name }}
</todo-button>
该插槽可以访问与模板其余部分相同的实例 property (即相同的“作用域”)。

Slot explanation diagram

插槽不能访问 <todo-button> 的作用域。例如,尝试访问 action 将不起作用:

<todo-button action="delete">
  Clicking here will {{ action }} an item
  <!-- `action` 未被定义,因为它的内容是传递*到* <todo-button>,而不是*在* <todo-button>里定义的。  -->
</todo-button>
作为一条规则,请记住:

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

#后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中:

<button type="submit">
  <slot></slot>
</button>
我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容,我们可以将它放在 <slot> 标签内:

<button type="submit">
  <slot>Submit</slot>
</button>
现在当我在一个父级组件中使用 <submit-button > 并且不提供任何插槽内容时:

<submit-button></submit-button>
后备内容“Submit”将会被渲染:

<button type="submit">
  Submit
</button>
但是如果我们提供内容:

<submit-button>
  Save
</submit-button>
则这个提供的内容将会被渲染从而取代后备内容:

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

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.