如何在 vue jsx 组件中保持状态？答案

【问题标题】：how to keep state in vue jsx component?如何在 vue jsx 组件中保持状态？
【发布时间】：2021-07-10 05:47:58
【问题描述】：

我想在表格列标题中呈现搜索输入，它本身需要保持keyword 状态，但它的值不会随着用户输入而改变。那么如何解决keyword 状态呢？

文本代码在这里

function renderInputFilter(submit: (keyword: string) => void) {
  const keyword = ref('')
  return <div>
    <ElInput placeholder="input keyword" v-model={keyword.value} />
    <ElButton type="primary" icon="el-icon-search" onClick={() => submit(keyword.value)} />
  </div>
}

【问题讨论】：

标签： jsx vuejs3 vue-composition-api

【解决方案1】：

因为这部分： v-model={keyword.value}
将其更改为 v-model={keyword}

You don't need to use .value in the template because refs are automatically "unwrapped" in the template.:

当 ref 作为渲染上下文（从 setup() 返回的对象）上的属性返回并在模板中访问时，它会自动浅层展开内部值。只有嵌套的 ref 需要模板中的 .value：

【讨论】：