Vue相关面试题-怎样定义组件？

布满荆棘的人生 2023-06-13 11:10 26阅读 0赞

#### 怎样定义组件 ####

使用 [Vue.extend()][Vue.extend] 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

let mod = Vue.extend({ 
     // 通过 template 设置 组件的 HTML 结构
     template: '<h1>使用 Vue.extend 创建的组件</h1>'
    })
    // Vue.component( id, [definition] ) 注册或获取全局组件。注册组件自动使用给定的id设置组件的名称
    // id 字符串类型的组件名；可以使用驼峰命名，使用组件时必须用 “-” 的方式来连接单词
    Vue.component('myMod', mod)
    // 简写：可以直接将 构造器作为参数传入
    /*Vue.component('myMod', Vue.extend({ template: '<h1>使用 Vue.extend() 创建的组件</h1>' }))*/   
    
    new Vue({ 
     el: '#app',
     data: { },
     methods: { }
    })

直接使用 [Vue.component()][Vue.component] 创建组件

Vue.component('my-mod2', { 
      template: '<h1>直接使用 Vue.component() 创建组件</h1>'
    })
    
    new Vue({ 
      el: '#app',
      data: { },
      methods: { }
    })

创建私有组件

new Vue({ 
      el: '#app',
      data: { },
      // 创建私有组件
      components: { 
        modu: { 
          template: '<h1>通过 componets 定义私有组件</h1>'
        },
        modu2: { 
          template: '#co'
        }
    
      },
      methods: { }
    })

[Vue.extend]: https://cn.vuejs.org/v2/api/#Vue-extend
[Vue.component]: https://cn.vuejs.org/v2/api/#Vue-component

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关怎样在vue中导入组件？

![cd37902a63f44b63a39f1f1f0a80d224.png][] 要在 Vue 中导入组件，有以下几个步骤： 1. 在你的 Vue 项目中创建一个新的组

àì夳堔傛蜴生んèń/ 2024年03月26日 19:09/ 0 赞/ 82 阅读

相关 vue最新面试题（组件通信）

组件通信父子通信子父通信兄弟通信父传子主要是通过props来实现的，父组件需要通过import引入子组件，并注册，在子组件里面添加要传递的属

ゝ一纸荒年。/ 2023年06月25日 06:28/ 0 赞/ 35 阅读

相关 Vue相关面试题-怎样定义组件？

怎样定义组件使用 [Vue.extend()][Vue.extend] 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 let mod = Vue.

布满荆棘的人生/ 2023年06月13日 11:10/ 0 赞/ 27 阅读

相关 Vue相关面试题-vue怎样请求数据？vue路由是怎么做的（路由的原理）？

vue怎样请求数据 vue请求数据有 Vue-resource、Axios、fetchJsonp三种方式。Vue-resource是Vue官方提供的插件，axios与fe

柔光的暖阳◎/ 2023年06月13日 06:30/ 0 赞/ 27 阅读

相关 Vue相关面试题-active-class是哪个组件的属性？嵌套路由怎么定义？组件化模块化的区别？

active-class 是哪个组件的属性 active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；嵌套路由怎

蔚落/ 2023年06月13日 06:30/ 0 赞/ 23 阅读

相关 VUE源码相关面试题汇总

文章目录谈一下你对MVVM原理的理解请说一下响应式数据的原理 vue中是如何检测数组变化的？为何vue采用异步

Bertha 。/ 2023年02月13日 08:46/ 0 赞/ 28 阅读

相关 vue.js相关面试题整理

一、什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作

本是古典何须时尚/ 2022年05月13日 08:28/ 0 赞/ 251 阅读

相关 vue相关面试题

1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；双

忘是亡心i/ 2022年01月16日 00:51/ 0 赞/ 445 阅读

相关 vue怎样自定义指令

自定义指令可以去官网查看更多内容 [https://cn.vuejs.org/v2/guide/custom-directive.html][https_cn.vue

旧城等待，/ 2021年11月05日 13:28/ 0 赞/ 339 阅读

相关 vue 定义组件

在js中定义组件 Vue.component('名称',{ template:'xx', data:function(){

向右看齐/ 2021年07月24日 23:04/ 0 赞/ 466 阅读