web面试vue自定义组件及调用方式是怎样的

本篇文章为大家展示了web面试vue自定义组件及调用方式是怎样的，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

引入:

由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入,
并以标签的形式书写在中,
但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式

通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用

编码实现

以插件的形式使用组件

// 将要显示的组件导入import mymodel from '../components/mymodel.vue'export default {  install: function (Vue) {    // 1.0 根据 mymodel 组件对象得到它的构造函数    const Mymodel = Vue.extend(mymodel)    // 给所有的 vue 实例添加一个方法 $model    Vue.prototype.$model = function () {      // 为了显示一个组件： mymodel      // 2.0 创建一个组件对象      const obj = new Mymodel()      // 3.0 将组件显示出来      obj.show = true      // 4.0 得到组件对象的 html 结构      const html = obj.$mount().$el      // 5.0 将 html 结构渲染到页面上      document.body.append(html)    }  }}

使用

上述内容就是web面试vue自定义组件及调用方式是怎样的，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。