一、Vue.js组件注册内容

• 全局注册 • 组件基础 • 局部注册

二、全局注册

• 全局注册的组件在注册后可以用于任意实例或组件中。

<body><div id="app"><p>这是p标签</p><my-component></my-component></div><script src="./vue.js"></script><script>// 语法:  Vue.component('my-component',{选项对象});Vue.component('my-component',{template: '<div>这是我们全局注册的组件</div>'})new Vue({el:'#app',data: {}})</script>
</body>

• 注意：全局注册必须设置在根 Vue 实例创建之前。

三、组件基础

• 本质上，组件是可复用的 Vue 实例，所以它们可与 new Vue 接收相同的选项，例如 data、methods 以及生命周期钩子等。
• 仅有的例外是像 el 这样根实例特有的选项。

组件基础主要学习内容：• 组件命名规则 • template 选项 • data 选项

3.1组件命名规则

• 组件具有两种命名规则：
• kebab-case：'my-component’ 驼峰命名法
• PascalCase：'MyComponent' 帕斯卡命名法

• 注意：无论采用哪种命名方式，在 DOM 中都只有 kebab-case 可以使用。

示例：我们再视图中使用组件的时候，不能够使用帕斯卡命名法去书写，否则会报错。

<body><div id="app"><my-com-a></my-com-a><!-- <MyComA></MyComA> --><my-com-b></my-com-b><!-- <MyComB></MyComB> --></div><script src="../01.TodoMVC/todomvc-app-template/node_modules/vue/dist/vue.js"></script><script>//kebab-case进行注册 （驼峰命名法）Vue.component('my-com-a', {template: '<div>这是a组件的内容</div>'})//pascalCase进行注册 （帕斯卡命名法）Vue.component('MyComB', {template: '<div>这是b组件的内容</div>'})new Vue({el: '#app'})</script>
</body>

3.2template选项

• template 选项用于设置组件的结构，最终被引入根实例或其他组件中。

• 注意：组件必须只有一个根元素。如果出现同级的根元素就会出现报错情况。

<body><!-- 挂载元素 --><div id="app"><my-com-a></my-com-a></div><script src="../01.TodoMVC/todomvc-app-template/node_modules/vue/dist/vue.js"></script><script>Vue.component('MyComA', {template: `<div><h1>组件 A 的标题内容</h1></div><div><h1>组件 A 的标题内容</h1></div>`});new Vue({el: '#app'})</script>
</body>

3.3data选项

• data 选项用于存储组件的数据，与根实例不同，组件的 data 选项必须为函数，数据设置在返回值对象中。

<body><!-- 挂载元素 --><div id="app"><my-com-a></my-com-a><my-com-a></my-com-a><my-com-a></my-com-a></div><script src="../01.TodoMVC/todomvc-app-template/node_modules/vue/dist/vue.js"></script><script>Vue.component('MyComA',{template: `<div><h3> {{ title }} </h3><p>  {{content}}  </p></div>`,// data() {} 简写形式data: function () {return {title: '这是组件A的标题',content: '这是组件A的内容'}}});new Vue({el: '#app',data: {}})</script>
</body>

data参数使用函数的实现方式，是为了确保每个组件实例可以维护一份被返回对象的独立的拷贝，不会相互影响。

通过如下使用DevTools插件，我们可以选择一个组件进行数据修改，发现我们多次调用的组件，再修改的时候，只会更改自身选中的组件，其他的同名的组件不会随之变化，受到影响。

四、局部注册

• 局部注册的组件只能用在当前实例或组件中。

<body><div id="app"><my-com-a></my-com-a><my-com-b></my-com-b></div><script src="vue.js"></script><script>new Vue({el: '#app',data: {},components: {'my-com-a': {templata: `<div><h3>{{ title }}</h3><p>{{ content }}</p></div>`,data: function () {return {title: '这是组件A的标题',content: '这是组件A的内容'}}},'my-com-b': {templata: `<div><h3>{{ title }}</h3><p>{{ content }}</p></div>`,data: function () {return {title: '这是组件B的标题',content: '这是组件B的内容'}}}}})</script>
</body>

单独配置组件的选项对象：

<body><div id="app"><my-com-a></my-com-a><my-com-b></my-com-b></div><script src="vue.js"></script><script>let MyComA = {templata: `<div><h3>{{ title }}</h3><p>{{ content }}</p></div>`,data: function () {return {title: '这是组件A的标题',content: '这是组件A的内容'}}};let MyComB =  {templata: `<div><h3>{{ title }}</h3><p>{{ content }}</p></div>`,data: function () {return {title: '这是组件B的标题',content: '这是组件B的内容'}}};new Vue({el: '#app',data: {},components: {'my-com-a': MyComA,'my-com-b': MyComB}})</script>
</body>

ES6 的对象属性简写：

new Vue({el: '#app',data: {},components: {MyComA,MyComB}})

（24）Vue.js组件—组件注册相关推荐

Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串模板字面量 x-template 内联模板 render ...
360奇舞团钟恒：选用Vue.js进行组件化开发，我们遇到了哪些坑？
责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_ ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
两个读书笔记：springboot+vue.js分布式组件全栈开发训练营 + 大数据开发基础
(springboot+vue.js分布式组件全栈开发训练营原文在notion中, 大数据开发在思维导图中, 这个博客只是保存, 无法阅读. ) what is different between s ...
Vue.js分页组件实现：diVuePagination
为什么80%的码农都做不了架构师?>>> 完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gi ...
Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
为什么要用Vue.js的组件化开发
那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子.这 ...

（24）Vue.js组件—组件注册