自定义vue组件分三个步骤,vue.js自定义组件

　　本文主要介绍web访谈中经常被问到的vue的自定义组件和调用方法。有需要的朋友可以借鉴一下，希望能有所帮助，也祝大家进步多多。

引入：

　　由于项目需求，一些相同的代码将被打包成组件，并导入到需要使用它们的地方。

　　并且以标签的形式书写，

　　然而，在“vant”组件库中，“对话框弹出框”组件有两种用法。

　　我们通常定制组件，通常以模式二的形式使用。今天，我们将介绍如何使用模式一。

编码实现

以插件的形式使用组件

　　//导入要显示的组件

　　从导入我的模型./components/mymodel.vue

　　导出默认值{

　　安装：功能(Vue) {

　　//1.0根据mymodel组件对象获取其构造函数

　　const my model=vue . extend(my model)

　　//向所有vue实例添加方法$model

　　vue . prototype . $ model=function(){

　　//为了显示组件：mymodel

　　//2.0创建一个组件对象

　　const obj=新的Mymodel()

　　//3.0显示组件。

　　obj.show=true

　　//4.0获取组件对象的html结构

　　const html=obj。$mount()。$el

　　//5.0将html结构呈现到页面

　　文档.正文.追加(html)

　　}

　　}

　　}

使用

　　模板

　　差异

　　H3以普通组件的方式调用/h3。

　　按钮@click=fn1 显示型号/按钮

　　！-my model:value= show @ input= val=(show=val)/my model-

　　mymodel v-model=show/mymodel

　　！- sync:传入组件的参数：xxx收到来自组件的事件：update:xxx事件将自动修改xxx -

　　！-v-model: parameter:值被传递到组件中。事件：输入事件将自动修改值-

　　以h3js的方式调用/h3

　　按钮@click=fn2 显示型号/按钮

　　/div

　　/模板

　　脚本

　　从导入我的模型././components/mymodel.vue

　　导出默认值{

　　data () {

　　返回{

　　显示：假

　　}

　　},

　　方法：{

　　fn1 () {

　　this.show=true

　　},

　　fn2 () {

　　//通过js方法直接显示组件

　　这个。$model()

　　}

　　},

　　组件：{

　　我的模型：我的模型

　　}

　　}

　　/脚本

　　款式/风格

　　以上是web interview vue的定制组件和调用方法的详细说明。更多关于web面试vue的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。