如何以正确的方式嵌套组件

How to nest components in a proper way

本文关键字：方式 嵌套 组件      更新时间：2023-09-26

我从EMBER开始.js，我有一些疑问：

假设我正在创建一个简单的聊天，只是为了示例。我有一个包含用户列表的左侧面板，以及一个包含发送消息的右侧面板。

我考虑创建一个名为：users-list 的组件，该组件显示用户列表。该列表中的每个成员都应该是另一个称为 user 的组件。

这意味着user组件负责绘制自己，包括用户名、上次发送的消息、名称颜色等......（都是属性），并且在其名称旁边的按钮中也有一些操作：changeName，changeColor，leaveRoom。

而users-list负责维护用户列表并使用user组件显示它们。

所以这里的问题是：

  1. 这是正确的方法吗？
  2. 如果是：如何从users-list组件、子组件user组件内部的操作（leaveRoom操作）中删除项目？
  3. 如果不是：我应该如何实现？我想把责任隔离开来。
  1. 这是正确的方法吗？

是的，它是。但是你必须在组件名称中使用连字符，所以user组件应该变成这样的东西：user-component .

如果是：如何从用户列表组件中删除项目，从 子用户组件内部的操作（离开房间操作）？

请参阅工作演示。

在模板users-list将操作（在 users-list 中定义）传递给user-component：

{{#each model as |user|}}
    {{user-component model=user leaveRoom=(action 'leaveRoom')}}
{{/each}}

users-list中的操作leaveRoom：

actions: {
  leaveRoom(user) {
    alert('User-list: user ' + user.name + ' wants to leave room.');
  }
}

然后，我们有一个简单的user-component模板，带有触发user-component leaveRoom操作的按钮：

{{model.name}} - <button {{action 'leaveRoom' model}}>Leave room</button>

user-component中的操作leaveRoom调用从 users-list 传递给组件的操作。因此，user-component中的leaveRoom如下所示：

actions: {
  leaveRoom(user) {
    this.get('leaveRoom')(user);
  }
}
相关文章：