什么是组件？

组件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. CentOS7.X中设置nginx和php-fpm的开机自启动

    一.设置nginx的开机自启动方法 1.在/etc/init.d/目录下创建nginx文件 vi /etc/init.d/nginx 编写内容如下: #!/bin/sh # # nginx - thi ...

  2. python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)

    Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外 ...

  3. hello 2019 D

    一开始sb了考虑总的因子疯狂T,做题太少了...没意识到会有辣么多因子... 神仙说1e9以内的最多的就有800个因子的了... 然后我们可以考虑质因子 我觉得已经说得很明白了... 唔逆元好像exg ...

  4. python中print(obj) 与sys.stdout.write()的区别

    print(obj) 其实等价于sys.stdout.write(obj+\n),而\r表示回到行首,所以需要输出进度条时可以用以下代码 rate = float(has_sent) / float( ...

  5. vue的插槽slot

    插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容       sl ...

  6. release git tag easy use

    #!/usr/local/env bash FLOW_VERSION=v2.0-rc-`date +"%Y-%m-%dT%H-%M-%S"` echo "version: ...

  7. C#获取邮件客户端保存的邮箱密码

    有时候邮件客户端记录了邮箱密码,但自己却忘记了,此时可以使用C#建立一个临时的"邮件服务器",截取密码: IPEndPoint ipEndPoint = new IPEndPoin ...

  8. php导出超大csv导出方法，读取超大文件或者接受超大数组，防止内存溢出

    基本思路就是,知道总数之后分割成2万一个数组进行查询,最后独立写入csv,避免数据过大导致溢出 速度还不错,在php7下,机器I5 8G内存,128G,SSD,52W多条,大概也就30秒,出来整个文件 ...

  9. pytorch实现AlexNet网络

    直接上图吧 写网络就像搭积木

  10. c语言实现wc功能

    本随笔对网站http://blog.chinaunix.net/uid-22566367-id-381958.html有所借鉴 #include <stdio.h> #define BEG ...