Vue中动态新增表格行,行内组件采用jsx形式塞入表格数据中,其sync的使用

89 阅读1分钟

业务描述:采用表格的形式进行添加数据,表格每添加一行,往表格中塞入对应的组件,这里使用了jsx的模式,jsx无法直接像vue一样,使用sync修饰符进行父子组件数据的更新。 解决方法:

<MyComponent visible={this.visible} {...{on:{'update:visible': console.log}}} />

上述父组件将visible传递给子组件,当子组件想要更新 visible 数据时,可以触发 update:visible 事件,并将新的数据作为参数传递给父组件的事件处理函数 console.log。 这样当子组件中的visible数据发生变化时,父组件对应的值也会发生变化

在实际使用中,可以将 console.log 替换为你自己的事件处理函数,用于处理子组件传递给父组件的数据更新。