左小白的技术日常
Github

vue组件的封装性与可操作性:ref拿不到子组件实例以及vuex增加代码复杂度问题

这篇文章发布于 2020/10/31,归类于
标签:
vue组件封装props ref vuex封装组件时对比

一般在封装vue组件时,怎么把组件封装的更好,更容易维护理解是值得思考的问题

来看一个实际场景:一个组件里有高级查询和列表,他们东西都比较多,需要拆分成两个子组件

<!-- index.vue -->
<project-search></project-search>
<project-list></project-list>

查询的条件参数比较多,假设表单数据变量为 searchForm。

按照封装的完整性原则,自己的组件的数据放到自己的组件中,那么 searchForm 就需要放到 project-search 组件里。

但在index.vue中,我们需要查询列表,依赖searchForm的值,涉及到父组件取子组件的值的问题,一般有四种方法可以选择

对比这几种情况。我一般使用props,把值直接放到index.vue里,再传递给子组件。这样算是比较好理解的一种方法,虽然封装性不强。但涉及到数据需要交互的场景,必须要做一些妥协。