什么是组件？

组件Component,可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用；

组件的使用：

1、使用全局的方法Vue.extend创建构造器；

2、再使用全局的方法Vue.component注册组件；

注意：在Vue.component里需要指明组件的名称，组件名称不能使用内置标签名称，如body.推荐使用短横线命名规则。

如：

my-component    正确 （推荐使用）

my-Component   错误

mycomponent    正确

Mycomponent    正确

myComponent   错误

MyComponent   错误

示例：

vue 代码：

<script>

            window.onload= () =>{

                //创建构造器

                let myComponent=Vue.extend({

                    template:"<h1>欢迎来到perfect*的博客园</h1>"

                });

                //注册组件

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

          new Vue({

                el:'div',

                data:{

                }

            })}

        </script>

html:

<div>

            <my-component></my-component>

        </div>

使用注册组件简写的方式：

出现的问题：

修改后的效果：

vue代码：

//注册组件的简写方式

                Vue.component('my-componenta',{

                    template:'<h2>hello vue</h2>'

                });

html:

<my-componentA></my-componentA>

html标签是大小写不分的

组件的命名不支持驼峰命名方式

最终所有代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>component</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

         <script>

             window.onload= () =>{

                 //创建构造器

                 let myComponent=Vue.extend({

                     template:"<h1>欢迎来到perfect*的博客园</h1>"

                 });

                 //注册组件

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

                 //注册组件的简写方式

                 Vue.component('my-componenta',{

                     template:'<h2>hello vue</h2>'

                 });

                 new Vue({

                 el:'div',

                 data:{

                 }

             })}

         </script>

     </head>

     <body>

         <div>

             <my-component></my-component>

             <my-componentA></my-componentA>

         </div>

     </body>

 </html>

组件的介绍

详细介绍见官网：https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API

Vue 组件&组件之间的通信 之组件的介绍的更多相关文章

  1. Vue 组件&组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

  2. vue组件父子之间相互通信案例

  3. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  4. 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  5. vue-组件之间的通信：

    组件之间的通信:一个组件被调用,那么里面的数据就需要从前者调用,因为在开发中组件时重复调用的,在页面中会反复使用,但是里面的数据是不一样的,谁调用这个组件谁就传递数据给这个组件,所以就要暴露一些接口, ...

  6. Vue.js组件之同级之间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue.js组件之间的通信

    导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...

  8. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  9. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

随机推荐

  1. 【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）

    html 代码..video后边几个元素,可处理ios 系统的兼容性 <video id="myVideo" controls="controls" po ...

  2. 【腾讯云的1001种玩法】 Laravel 整合微视频上传管理能力，轻松打造视频App后台

    版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108597001488193402 来源:腾云阁 h ...

  3. svn中status为missing的文件的处理方式

    svn中status为missing的文件在每次commit时都会出现在待提交的列表里,而且它的上级文件夹前面有个红色的点,有碍观瞻,处理方式也很简单: 1.在待提交的列表里,右击该文件->de ...

  4. cpu选型

    就像手机有骁龙845和麒麟980等,电脑的cpu也有intel和amd,intel有台式机cpu, 网上搜索最具性价比神u:G4560,i3-8100, intel八代,包含奔腾G5600/G5500 ...

  5. K - Popular Cows

    来源poj2186 Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= N ...

  6. vue动态组件切换（选项卡）

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

  7. 特殊字符url编码以后再解码后出现错误（&not , &cent, &curren, &pound）

    Url编码的原内容是 “&notify_url=xxxx”  经过url编码以后再解码回来  “&not”的部分就变成了“¬” 解决方案:把原文里面待url编码的&符号先替换成 ...

  8. 关于break,return,和coutiune

    public boolean searchStudent(String name,int start,int end) { if(students==null) { return false; } f ...

  9. BrowserRoute服务器配置

    BrowserRoute服务器配置 在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由 ...

  10. vue computed的执行问题

    1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...