Vue自定义组件与调用方式详解

本文档主要介绍了在Web面试中关于Vue.js自定义组件的创建与调用方式，特别是针对“ vant ”组件库中的“Dialog弹出框”组件的两种使用方式。文档聚焦于第一种方式的实现，即通过JavaScript直接创建和挂载组件。 在Vue.js中，自定义组件是提高代码复用性和组织性的重要手段。当有重复的代码块时，我们可以将其封装成组件，然后在需要的地方进行导入和使用。文档中以“mymodel”组件为例，展示了如何实现这一过程。 首先，你需要导入要显示的组件，例如`mymodel.vue`。然后，在`export default`对象中定义一个`install`方法。在`install`方法中，通过`Vue.extend()`创建组件的构造函数，这样可以在运行时动态创建组件实例。 接下来，通过`Vue.prototype`扩展Vue实例，添加一个名为`$model`的方法。这个方法内部创建了一个`Mymodel`组件的新实例，并设置其`show`属性为`true`，以使其可见。接着，利用`$mount()`将组件挂载到一个元素上，获取其HTML结构，并将其插入到`document.body`中，从而实现在页面上的显示。 在模板部分，有两种展示组件的方式。第一种是通过常规的Vue组件方式，使用`v-model`或`sync`修饰符进行数据绑定。第二种是通过JavaScript来调用，点击按钮触发`fn2`方法，这个方法内部调用的就是之前在`install`中定义的`$model`方法，实现组件的动态创建和显示。 在数据部分，定义了`show`变量来控制组件的显示状态。在JavaScript方式中，`fn2`方法负责调用`$model`方法，从而显示组件。 这个文档深入浅出地讲解了Vue自定义组件的创建和JS方式的调用，对于理解Vue组件的动态管理和使用具有很好的参考价值，特别是在面试中展示对Vue组件机制的理解和应用能力。