Vue 组件&组件之间的通信 之组件的介绍
什么是组件？
组件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 组件&组件之间的通信 之组件的介绍的更多相关文章
- Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...
- vue组件父子之间相互通信案例
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
- 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- vue-组件之间的通信：
组件之间的通信:一个组件被调用,那么里面的数据就需要从前者调用,因为在开发中组件时重复调用的,在页面中会反复使用,但是里面的数据是不一样的,谁调用这个组件谁就传递数据给这个组件,所以就要暴露一些接口, ...
- Vue.js组件之同级之间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js组件之间的通信
导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
随机推荐
- MySQL 分页数据错乱重复
select xx from table_name wheere xxx order by 字段A limit offset;, 表数据总共 48 条,分页数量正常,但出现了结果混杂的情况,第一页的数 ...
- passwd命令
passwd命令用于设置用户的认证信息,包括用户密码.密码过期时间等.系统管理者则能用它管理系统用户的密码.只有管理者可以指定用户名称,一般用户只能变更自己的密码. 语法 passwd(选项)(参数) ...
- phpadmin dvwa sqli-labs xsser.me
下载phpadmin,安装后网站根目录 phpStudy\PHPTutorial\WWW 将下载的dvwa文件夹放到该目录下,修改config/config.inc.php文件中的mysql连接信息. ...
- word2vec:基本的安装及使用简介
官方word2vec的github下载地址:https://github.com/svn2github/word2vec 环境,linux-ubuntu-14.04LST,安装好git, gcc版本4 ...
- Nestjs 使用mongodb
Docs: https://docs.nestjs.com/techniques/mongodb yarn add @nestjs/mongoose mongoose 链接 // sec/app.mo ...
- 【谈谈IO】BIO、NIO和AIO
BIO: BIO是阻塞IO,体现在一个线程调用IO的时候,会挂起等待,然后Thread会进入blocked状态:这样线程资源就会被闲置,造成资源浪费,通常一个系统线程数是有限的,而且,Thread进入 ...
- HttpClient学习记录-系列1（tutorial）
1. HttpClient使用了facade模式,如何使用的? 2. HTTP protocol interceptors使用了Decorator模式,如何使用的? URIBuilder respon ...
- PHP（层叠样式表，写法分类），选择器的种类）
表单元素的取值怎么取 对应的属性值都有哪些? <span> 标签被用来组合文档中的行内元素. 注释:span 没有固定的格式表现.当对它应用样式时,它才会产生视觉上的变化. style ...
- javascript的数组之from()
Array.from()方法从一个类似数组或可迭代对象中创建一个新的数组实例. const arr = [1, 2, 3]; Array.from(arr); //[1, 2, 3] Array.fr ...
- 环形dp
对于环形的dp 大多情况都是破环成链 例如 那道宝石手镯的环形 一般来说都是要破环成链的. 或者说 是 两次dp 一次断开 一次强制连接即可. 我想 我应该沉淀下来了这些天写的题都有点虚 要不就是看了 ...