Props

Props 是在渲染组件时与其共享数据的主要方式。组件可以接受任意 props，而无需维护一份允许 props 的清单。

views/components/input.edge

<input
  type="{{ type || 'text' }}"
  placeholder="{{ placeholder || '' }}"
  name="{{ name }}"
  id="{{ name }}"
  value="{{ value: '' }}"
/>

让我们渲染 input 组件，并向它传递一些 props。

@!input({
  name: 'title',
  placeholder: 'Enter post title'
})

@!input({
  name: 'slug',
  placeholder: 'Enter post slug'
})

将 props 序列化为 HTML 属性

目前，我们是手动将 props 绑定到 input 元素上的 HTML 属性。这种方式无法扩展，因为我们必须为每一个 HTML 属性显式添加支持。

你可以使用 $props 对象的 toAttrs 方法，将所有 props 序列化为 HTML 属性。在下面的示例中，所有 props 都将被序列化为一个字符串，并应用到 input 元素上。

<input {{ $props.toAttrs() }} />

让我们更进一步，使用 .merge 方法为 input 元素指定默认的样式类。如果你在使用组件时传入了额外的类，它们会与默认类合并。

<input {{
  $props.merge({ class: ['input'] }).toAttrs()
}} />

输入输出

输入	输出
`@input({ type: 'text', name: 'title', id: 'title', })`	`<input type="text" name="title" id="title" class="input" />`
`@input({ type: 'text', name: 'title', id: 'title', class: [ 'input-medium', 'input-rounded' ] })`	`<input type="text" name="title" id="title" class="input input-medium input-rounded" />`

@input({
  type: 'text',
  name: 'title',
  id: 'title',
})

<input
  type="text"
  name="title"
  id="title"
  class="input"
/>

@input({
  type: 'text',
  name: 'title',
  id: 'title',
  class: [
    'input-medium',
    'input-rounded'
  ]
})

<input
  type="text"
  name="title"
  id="title"
  class="input input-medium input-rounded"
/>

Props 序列化没有提供内置 API 来通过 merge 方法移除已有的类。不过，你可以使用一个额外的 prop，让调用者在需要时忽略已有的类。

<input {{
  $props
    .mergeUnless(removeExistingStyles, { class: ['input'] })
    .except(['removeExistingStyles'])
    .toAttrs()
}} />

除非你在渲染组件时传入 removeExistingStyles prop，否则默认类会被应用。

@!input({
  removeExistingStyles: true,
  class: ['flex', 'mt-2', 'mb-4', 'border']
})

以下是 $props 对象上可用的方法列表。

判断给定的 prop 是否存在。

{{ $props.has('text') }}

获取给定 prop 的值。

{{ $props.get('text') }}

获取一个只包含所提及 key 的新 props 对象。

{{ $props.only(['text', 'class']).get('text') }}

获取一个排除所提及 key 的新 props 对象。

{{ $props.except(['text', 'size']) }}

将自定义属性与 props 值合并。props 值优先于自定义属性。

在下面的示例中，type 属性的值将为 text，除非在渲染组件时显式提供了值。

<button {{ $props.merge({ type: 'text' }).toAttrs() }}>
</button>

@!component('components/button', { type: 'reset' })

输出的 HTML

<button type="reset">
</button>