Vue.js : howto 触发方法从一个组件到另一个组件
Vue.js : howto trigger method from one component to another
Vue.js 版本 2.6.11 合并到 asp.net 核心 mvc 视图中。
想象一下下面的场景。
一个页面有 2 个组件。
<v-masterlist v-bind:dummy-prop="dummyProp"> </v-masterlist>
<v-detail v-bind:itemid="itemId"></v-detail>
主列表在创建时从 api 检索项目列表。选择项目时,组件会发出页面捕获的事件。这会更新 itemId,触发详细信息组件从 api.
检索完整记录
在详细信息组件中,用户可以更新或删除该记录。这些操作应该触发 masterlist 再次从 api.
中检索更新的项目列表
我现在通过在 masterlist 上添加一个虚拟道具来设置它。每当 属性 发生变化时,都会从 api.
中检索列表
在详细信息组件中 update/delete 发出一个事件,解释执行了什么操作 (update/delete)。该事件在页面中被捕获,将 dummyProp 设置为新的随机值,从而触发 masterlist 自行更新。
它工作正常,但看起来很乱。如果 masterlist 能够捕获细节发出的事件,那就更好了。那可能吗 ?或任何其他建议?
最后我们开始使用这个发射器组件,效果很好。 https://github.com/developit/mitt
Vue.js 版本 2.6.11 合并到 asp.net 核心 mvc 视图中。
想象一下下面的场景。 一个页面有 2 个组件。
<v-masterlist v-bind:dummy-prop="dummyProp"> </v-masterlist>
<v-detail v-bind:itemid="itemId"></v-detail>
主列表在创建时从 api 检索项目列表。选择项目时,组件会发出页面捕获的事件。这会更新 itemId,触发详细信息组件从 api.
检索完整记录在详细信息组件中,用户可以更新或删除该记录。这些操作应该触发 masterlist 再次从 api.
中检索更新的项目列表我现在通过在 masterlist 上添加一个虚拟道具来设置它。每当 属性 发生变化时,都会从 api.
中检索列表在详细信息组件中 update/delete 发出一个事件,解释执行了什么操作 (update/delete)。该事件在页面中被捕获,将 dummyProp 设置为新的随机值,从而触发 masterlist 自行更新。
它工作正常,但看起来很乱。如果 masterlist 能够捕获细节发出的事件,那就更好了。那可能吗 ?或任何其他建议?
最后我们开始使用这个发射器组件,效果很好。 https://github.com/developit/mitt