vue注册组件的几种方式总结

1、全局注册(这种方式注册组件必须在vue实例化之前声明)

Vue.component('tag-name',{})

2、局部注册

var Child = {
 template: '<div>A custom component!</div>'
}
new Vue({
 // ...
 components: {
 // <my-component> 将只在父模板可用
 'my-component': Child
 }
})

3、扩展实例

// 定义一个混合对象
var myMixin = {
 created: function () {
 this.hello()
 },
 methods: {
 hello: function () {
  console.log('hello from mixin!')
 }
 }
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
 mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

以上这篇vue注册组件的几种方式总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue.js划分组件的方法
  • vue mixins组件复用的几种方式（小结）
  • vue 组件 全局注册和局部注册的实现
  • Vue 创建组件的两种方法小结(必看)
赞 (0)

相关推荐

  • vue mixins组件复用的几种方式（小结）

    最近在做项目的时候,研究了mixins,此功能有妙处.用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似.我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? 不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦:第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰:有没有好的方法,有那就是用vue的混合插件mixins.混合在Vue是为了提出相似的数据和功能,使代码易懂,简单.清晰. 1.场景 假设我们有几个不同的组件,它们的工作是切换状

  • vue 组件 全局注册和局部注册的实现

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content

  • Vue.js划分组件的方法

    Vue.js划分组件的方法

    常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的. 总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类.还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的? Vue的组件是怎

  • Vue 创建组件的两种方法小结(必看)

    创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法 用来注册全局组件 id 是string类型,即是注册组件的名称 option

  • vue注册组件的几种方式总结

    1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } }) 3.扩展实例 // 定义一个混合对象 var myMi

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

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

  • vue 注册组件的使用详解

    一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 二.如何注册组件 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面用代码演示这三步 <!DOCTYPE html> <html> <body> <div id=&q

  • Vue 多层组件嵌套二种实现方式(测试实例)

    最近在研究vue组件的学习,给自己留个笔记,也分享给大家,希望能对大家有所帮助 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例-组件嵌套二种方式</title> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> &

  • Vue加载组件、动态加载组件的几种方式

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示: //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const i

  • 详解Vue注册组件的方法

    目录 简介 说明 官网网址 组件名字 全局注册(一般用于框架) 局部注册(不常用) 模块系统 在模块系统中局部注册(常用) 基础组件的自动化全局注册 简介 说明 本文介绍Vue注册组件的方法. Vue注册组件有这几种:全局注册.局部注册.在模块系统中注册. 官网网址 https://v2.cn.vuejs.org/v2/guide/components-registration.html 组件名字 注册一个组件的时候,需要给它一个名字.比如在全局注册: Vue.component('my-com

  • Vue路由切换的两种方式示例详解

    目录 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 1.2 路径切换 1.3 path切换 1.4 name切换(推荐) 2. js切换 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 语法:<a href=“# + 路由路径”>标签内容</a> 例子: 路由规则为: const router = new VueRouter({ //路由对象数组 routes: [{ path: '/login', component:

  • Vue注册组件命名时不能用大写的原因浅析

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑 下面我们来看个例子: <div id="app"> <myTemplate></myTemplate> </div> <script> Vue.component('myTemplate',{ tem

  • vue请求数据的三种方式

    请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1.安装vue-resource模块 cnpm install vue-resource --save 加--save是为了在package.json中引用,表示在生产环境中使用.因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,pa

随机推荐