RiotJS中嵌套标签部分变量未更新的原因咨询

嘿，我之前也踩过RiotJS组件属性更新的坑，咱们来聊聊你的问题！

首先得明确问题根源：你在<nested-tag>里的this.myTitle = opts.title和this.myKeyword = opts.keyword，只在组件第一次挂载的时候执行了一次。当父组件的keyword变化时，嵌套组件的opts.keyword其实已经更新了，但你的内部变量myKeyword并没有跟着重新赋值，所以模板里显示的还是旧值。

下面给你两个最常用的解决方案，按需选择：

方案1：直接在模板中使用opts（最推荐） #

既然opts是RiotJS组件接收外部属性的入口，它本身是响应式的——当父组件传递的属性变化时，opts会自动更新，模板也会重新渲染。所以你完全可以跳过中间变量，直接在模板里用opts：

<nested-tag>
  <p>myTitle: {opts.title}</p>
  <p>{opts.keyword}</p>

  <script>
    <!-- 不需要手动赋值内部变量，省去维护成本 -->
  </script>
</nested-tag>

这样不管父组件的title或keyword怎么变，嵌套标签的模板都会实时显示最新值，省心又高效。

方案2：监听组件更新事件，同步内部变量 #

如果你因为业务逻辑必须用组件内部的myTitle、myKeyword变量，那就要在组件的update钩子中重新赋值，确保每次属性变化时内部变量都能同步更新：

<nested-tag>
  <p>myTitle: {myTitle}</p>
  <p>{myKeyword}</p>

  <script>
    // 初始化时赋值一次
    this.myTitle = opts.title;
    this.myKeyword = opts.keyword;

    // 监听组件更新事件，每次属性变化时同步变量
    this.on('update', () => {
      this.myTitle = opts.title;
      this.myKeyword = opts.keyword;
    });
  </script>
</nested-tag>

另外还要检查父组件的keyword更新是否符合RiotJS的响应式规则：确保你是通过this.keyword = 新值的方式修改的，而不是直接修改对象的深层属性（如果keyword是对象的话）。比如父组件的search方法应该这样写：

search(e) {
  this.keyword = e.target.value;
  // 不需要手动调用update，RiotJS会自动触发组件更新
}

完整示例参考 #

父组件<my-tag>：

<my-tag>
  <input type="text" onkeyup={search} value={keyword} />
  <ul>
    <li each={items}>
      <nested-tag title={title} keyword={parent.keyword}></nested-tag>
    </li>
  </ul>

  <script>
    this.keyword = '';
    this.items = [{ title: '前端入门' }, { title: 'RiotJS进阶' }];

    search(e) {
      this.keyword = e.target.value;
    }
  </script>
</my-tag>

嵌套组件用方案1的写法就足够应对大部分场景啦，简单又不易出错。

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