Step1：Vue.extend()创建组件
Step2：Vue.component()注册组件，注册的标签一定要用小写
Step3：挂载点使用组件


<!doctype html>
<html><head><meta charset="utf-8"><title>3 Step 创建一个组件</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app1"><!-- Step3：挂载点1使用组件 --><my-component></my-component></div><div id="app2"><!-- Step3：挂载点2使用组件 --><my-component></my-component></div><div><!-- 这里不属于挂载点，所以不会显示！ --><my-component></my-component></div><script type="text/javascript">//Step1：创建组件var myComponent = Vue.extend({template: "<div>这是一个组件</div>"})//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件Vue.component('my-component', myComponent)new Vue({el: '#app1', //挂载点1})new Vue({el: '#app2' //挂载点2})</script></body></html>

全局注册和局部注册

全局注册:

Vue.component('my-component', myComponent)

局部注册:

我们需要在声明挂载点的地方注入组件即可：

            new Vue({el: '#app1',components:{'my-component', myComponent'}})

这样只能在挂载点为#app1地方使用my-component组件，==在挂载点#app2的地方使用my-component组件就会报错==。

语法糖创建并注册组件

<!doctype html>
<html><head><meta charset="utf-8"><title>3 Step 创建一个组件</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app1"><!-- Step3：挂载点1使用组件 --><my-component></my-component></div><div id="app2"><!-- Step3：挂载点2使用组件 --><my-component></my-component><hr><strong>使用语法糖创建并注册组件</strong><sugar-component></sugar-component></div><div><!-- 这里不属于挂载点，所以不会显示！ --><my-component></my-component></div><hr ><strong>使用语法糖在局部注册并创建多个组件</strong><div id="app3"><sugar-component2></sugar-component2><sugar-component3></sugar-component3></div><script type="text/javascript">//Step1：创建组件var myComponent = Vue.extend({template: "<div>这是一个组件</div>"})//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件Vue.component('my-component', myComponent)//Step2: 可以使用语法糖,省略Step1,“全局注册”组件的同时创建模板内容Vue.component('sugar-component', {template: '<div>这是用语法糖创建并注册的组件，这样就可以省略自己使用Vue.extend创建组件的步骤，系统会自动为我们使用Vue.extend去创建组件。</div>'})new Vue({el: '#app1', //挂载点1})new Vue({el: '#app2' //挂载点2})new Vue({el: '#app3', //挂载点3,同样可以再局部使用语法糖创建并注册组件components: {'sugar-component2': {template: '<div>这是使用语法糖在局部注册并创建组件的内容。</div>'},'sugar-component3': {template: '<div>使用语法糖，在局部可以同时创建并注册“多个组件”的内容。</div>'}}})</script></body></html>

转载于:https://www.cnblogs.com/duanyong/p/10884664.html

Vue.js 3 Step 创建一个组件相关推荐

vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
vue js 对象下的原型_如何使用Vue.js和Pusher创建实时原型反馈应用程序
vue js 对象下的原型 by Neo Ighodaro 由新Ighodaro 如何使用Vue.js和Pusher创建实时原型反馈应用程序 (How to create a realtime pro ...
react中创建一个组件_如何使用React和MomentJS创建一个Countdown组件
react中创建一个组件 Recently I had to create a Countdown for one of my other projects, and I thought that i ...
初探 amaze-vue（基于vue.js封装的Amaze UI 组件库）
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
vue.js仿微信聊天窗口展示组件
原链接:https://www.jianshu.com/p/0faf8e78d0a5 源码:https://github.com/doterlin/vue-wxChat 演示地址:https://do ...
Vue.js(十) element-ui PC端组件库
一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...
Vue.js中的8种组件间的通信方式；3个组件实例是前6种通信的实例，组件直接复制粘贴即可看到运行结果
文章目录一.$children / $parent 二.props / $emit 三.eventBus 四.ref 五.provide / reject 六.$attrs / $listeners ...
【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍轻量级.可靠的移动端 Vue 组件库有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性拥 ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...

Vue.js 3 Step 创建一个组件

全局注册和局部注册

全局注册:

局部注册:

语法糖创建并注册组件

Vue.js 3 Step 创建一个组件相关推荐

最新文章

热门文章