Alpine.js嵌套作用域中外层属性的可选化及默认值设置

要实现内部组件可选获取外层作用域的foo属性并设置默认值，你可以通过以下两种可行方案处理：

方案一：用try/catch捕获引用错误 #

在内部x-data的getter中尝试访问foo，若外层不存在该属性会抛出ReferenceError，捕获错误后返回默认值即可：

<script src="https://unpkg.com/alpinejs@3.14.9/dist/cdn.min.js" defer></script>

<!-- 无外层x-data场景 -->
<div>
  <div x-data="{ get foo() { try { return foo } catch { return 'world' } }">
    <span x-text="foo"></span> <!-- 输出：world -->
  </div>
</div>

<!-- 有外层x-data场景 -->
<div x-data="{ foo: 'hello' }">
  <div x-data="{ get foo() { try { return foo } catch { return 'world' } }">
    <span x-text="foo"></span> <!-- 输出：hello -->
  </div>
</div>

方案二：通过$parent检查上层作用域 #

Alpine.js提供$parent用于访问直接上层的作用域对象，你可以判断$parent中是否存在foo属性，存在则使用该值，否则返回默认值：

<script src="https://unpkg.com/alpinejs@3.14.9/dist/cdn.min.js" defer></script>

<!-- 无外层x-data场景 -->
<div>
  <div x-data="{ get foo() { return $parent.foo ?? 'world' } }">
    <span x-text="foo"></span> <!-- 输出：world -->
  </div>
</div>

<!-- 有外层x-data场景 -->
<div x-data="{ foo: 'hello' }">
  <div x-data="{ get foo() { return $parent.foo ?? 'world' } }">
    <span x-text="foo"></span> <!-- 输出：hello -->
  </div>
</div>

方案对比 #

• 方案一通用性更强，无论嵌套多少层，都会自动向上查找foo属性直到顶层作用域；
• 方案二仅针对直接上层作用域，若foo在更外层嵌套中，需要链式调用$parent.$parent.foo，逻辑更清晰但灵活性稍弱。

内容的提问来源于stack exchange，提问作者lonix