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)
    }
  }
}

使用

<template>
  <div>
    <h3>以普通组件的方法来调用</h3>
    <button @click="fn1">show Model</button>
    <!-- <mymodel :value="show" @input="val => (show = val)"></mymodel> -->
    <mymodel v-model="show"></mymodel>
    <!-- sync：向组件内传入了参数： xxx 从组件中接收了事件：update:xxx 事件会自动修改 xxx -->
    <!-- v-model：向组件内传入了参数： value 从组件中接收了事件：input 事件会自动修改 value -->
    <h3>以 js 方式来调用</h3>
    <button @click="fn2">show Model</button>
  </div>
</template>
<script>
import mymodel from '../../components/mymodel.vue'
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    fn1 () {
      this.show = true
    },
    fn2 () {
      // 通过 js 的方法直接将组件显示出来
      this.$model()
    }
  },
  components: {
    mymodel: mymodel
  }
}
</script>

<style></style>

以上就是web面试vue自定义组件及调用方式的详细内容，更多关于web面试vue的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue 怎么创建组件及组件使用方法

    什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢? 这里来说说怎么用组件?怎么样创建自己的组件?: 1)创建自己的组件 通过vue.extend("template");通过vue构造器去拓展一个模板,

  • vue 自定义组件的写法与用法详解

    三个技能,父组件 -> 子组件传值(props).子组件 -> 父组件传值(emit用来使这个独立的组件通过一些逻辑来融入其他组件中.举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等:而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来. (1)使用props可以实现父子组件之间的传值 (2)使用this.$emit()可是实现子组件调用父组件的方法 一.在commponents文

  • vue2.0 自定义组件的方法（vue组件的封装）

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了,这需要我们去封装自己的可复用组件 二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备组件的好数据

  • Vue中自定义全局组件的实现方法

    前言 有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.今天就解决了一个长期困扰着我的问题,现在记录一下,供日后参考. 涉及知识点是Vue.js官网教程中的插件使用 方法如下: 首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用.这无疑增加了许多代码重复. 而在使用Vue.js的一些UI框架的时候则注意到,只需要在项目的入口文件中import这个插件然后在接着Vue.use('插件名').这样

  • 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

    简介 Vue.use( plugin ):安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.install 方法将被作为 Vue 的参数调用. 当 install 方法被同一个插件多次调用,插件将只会被安装一次. Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue, op

  • Vue自定义组件的四种方式示例详解

    四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t

  • web面试vue自定义组件及调用方式

    web面试vue自定义组件及调用方式

    引入: 由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入, 并以标签的形式书写在中, 但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式 通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用 编码实现 以插件的形式使用组件 // 将要显示的组件导入 import mymodel from '../components/mymodel.vue' export default { install: fu

  • VUE 自定义组件模板的方法详解

    VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • vue自定义组件实现v-model双向绑定数据的实例代码

    项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">

  • vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo

  • 使用form-create动态生成vue自定义组件和嵌套表单组件

    使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreate.maker.create('i-button').props({ type:'primary', field:'btn' loading:true }) ] $f = formCreate.create(rule); 上面的代码是通过maker生成器动态生成一个

  • 在vue自定义组件中使用 v-model指令详情

    在vue自定义组件中使用 v-model指令详情

    目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件

  • Vue 自定义组件 v-model 使用详解

    目录 Vue2中使用 Vue3中使用 v-model 使用 modelValue 自定义 v-model 的使用的参数 多个 v-model 绑定 自定义v-model 的修饰符 Vue2中使用 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value attribute 用于不同的目的.model 选项可以用来避免这样的冲突: Vue.component('base-checkbox', { m

  • 浅析Vue自定义组件的v-model

    最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price变量与输入值双

随机推荐