vue组件的定义

● 组件(Component)是Vue.js最强大的功能之一

● 组件可以扩展HTML元素，封装可重用代码

● 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能

● 有些情况下，组件也可以表现用 is 特性进行了扩展的原生的HTML元素

● 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周期钩子

vue组件的功能

1）能够把页面抽象成多个相对独立的模块

2）实现代码重用，提高开发效率和代码质量，使得代码易于维护

Vue组件封装过程

● 首先，使用Vue.extend()创建一个组件

● 然后，使用Vue.component()方法注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

组件使用流程详细介绍

1、组件创建---有3中方法，extend()      <template id=''>      <script type='text/x-template'  id=''>

　　A、调用Vue.extend()，创建名为myCom的组件，template定义模板的标签，模板的内容需写在该标签下

　　var myCom = Vue.extend({
　　　　template: '<div>这是我的组件</div>'
　　})
　　B、<template id='myCom'>标签创建，需要加上id属性

　　　　<template id="myCom">
　　　　　　<div>这是template标签构建的组件</div>
　　　　</template>
　　C、<script type='text/x-template' id='myCom'>,需加id属性，同时还得加type="text/x-template",加这个是为了告诉浏览器不执行编译里面的代码

　　　　<script type="text/x-template" id="myCom1">
　　　　　　<div>这是script标签构建的组件</div>
　　　　</script>
2、注册组件----有2中方法，全局注册，局部注册

　　A1、全局注册：一次注册( 调用Vue.component( 组件名称，为组件创建时定义的变量 ) )，可在多个Vue实例中使用。

　　　　我们先用全局注册，注册上面例子中创建的myCom组件

　　　　Vue.component('my-com',myCom)
　　A2、全局注册语法糖：不需要创建直接注册的写法

　　　　Vue.component('my-com',{
　　　　　　'template':'<div>这是我的组件</div>'
　　　　})
　　　　'my-com'为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。

　　A3、如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值

　　　　Vue.component('my-com',{
　　　　　　template: '#myCom'
　　　　})
　　B1、局部注册：只能在注册该组件的实例中使用，一处注册，一处使用

　　　　var app = new Vue({
　　　　　　el: '#app',
　　　　　　components: {
　　　　　　'my-com': myCom
　　　　　}
　　　　})
　　B2、局部注册语法糖：

　　　　var app = new Vue({
　　　　　　el: '#app',
　　　　　　components: {
　　　　　　　　'my-com': {
　　　　　　　　　　template: '<div>这是我的组件</div>'
　　　　　　　　}
　　　　　　}
　　　　})
　　B3、<template>及<script>创建的组件，局部注册

　　　　　var app = new Vue({
　　　　　　　　el: '#app',
　　　　　　　　components: {
　　　　　　　　　　'my-com': {
　　　　　　　　　　　　template: '#myCom'
　　　　　　　　　　}
　　　　　　　　}
　　　　　　})
3、调用组件

　　只需要在调用组件的地方，写上组件名字的标签即可

　　　　<div>
　　　　　　/*调用组件*/
　　　　　　<my-com></my-com>
　　　　</div>
4、例子

A、全局注册：新建一个html文件，引入vue.js，并且定义2个vue实例app1和app2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>

<script>
/*创建组件*/
var myCom = Vue.extend({
template: '<div>这是我的组件</div>'
});
/*全局注册组件*/
Vue.component('my-com',myCom);

/*定义vue实例app1*/
var app1 = new Vue({
el: '#app1'
});

/*定义vue实例app2*/
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>

可以看到，全局注册的组件在实例app1和实例app2中都可以被调用。
B、局部注册：将创建的组件注册到实例app1下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>

<script>
var myCom = Vue.extend({
template: '<div>这是我的组件</div>'
});

// Vue.component('my-com',myCom);
/*局部注册组件*/
var app1 = new Vue({
el: '#app1',
components:{
'my-com':myCom
}
});

var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>

可以看到只渲染了app1实例下的组件，app2实例虽然调用了该组件，但是因为这个组件没有在其内部注册，也没有全局注册，所以报错说找不到该组件。

C、template 和script标签创建组件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
<my-com1></my-com1>
</div>

<template id="myCom">
<div>这是template标签构建的组件</div>
</template>

<script type="text/x-template" id="myCom1">
<div>这是script标签构建的组件</div>
</script>

<script>
Vue.component('my-com1',{ //全局注册
template: '#myCom1'
});

var app1 = new Vue({
el: '#app1',
components:{
'my-com':{
template: '#myCom' //局部注册
}
}
});
</script>
</body>
</html>

5、异步组件

vue作为一个轻量级前端框架，其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。

当项目比较大型，结构比较复杂时，我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境，使用单文件组件，开发更简单，易上手，尤其是在对组件的处理上。对于原生vue.js，我们就得将组件构建在同一个html的script标签下或者html的外部js中，所有组件集中在一块，不容易管理，这也是原生vue,js的一点不便之处

vue.js可以将异步组件定义为一个工厂函数。

使用$.get获取本地文件会跨域，所以要将项目部署到服务器中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="vue.js"></script>
<script type="text/javascript" src='jquery-3.1.1.min.js'></script>
</head>
<body>
<div id="app1">
<head-com></head-com>
</div>
<script>
Vue.component('head-com', function (resolve, reject) {
$.get("a.html").then(function (res) {
resolve({
template: res
})
});
});

var app1 = new Vue({
el: '#app1'
});

</script>
</body>
</html>
显示效果如下：

6、Vue中的props数据流

通过在注册组件中申明需要使用的props，然后通过props中与模板中传入的对应的属性名，去取用这些值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="vue.js"></script>
    <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
</head>
<body>
    <div id='app'>
       <my-component name="jiangjiang" come-from="guilin"></my-component>
       <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
    </div>
    <script>
        Vue.component('my-component', {
          props: ['name', 'comeFrom'],    //在注册组件的时候通过props选项声明了要取用的多个prop
          // 在注册组件的模板中使用到props选项中声明的值
          template: '<p>我叫：{{name}}, 我来自：{{comeFrom}}</p>',
          created: function () {
            console.log('在created钩子函数中被调用')
            console.log('我叫：', this.name)
            console.log('我来自：', this.comeFrom)
          }
        })

new Vue({
          el: '#app'
        })

</script>
</body>
</html>

注意：

A、props取值的方式

在注册组件的模板内部template，直接通过prop的名称取值就Ok

template: '<p>我叫：{{name}}, 我来自：{{comeFrom}}</p>'
不在注册组件的模板内部template，用this.prop的方式

console.log('我来自：', this.comeFrom)
B、在template选项属性中，可以写驼峰命名法，也可以写短横线命名法

在HTML(模板)中，只能写短横线命名法

原因：vue组件的模板可以放在两个地方

a、Vue组件的template选项属性中，作为模板字符串

b、放在.html中[  用script  template标签创建的组件 ]，作为HTML

问题在于HTML不区分大小写，所以在vue注册组件中通用的驼峰命名法，不适用于HTML中的Vue模板，在HTML中写入props属性，必须写短横线命名法（把原来props属性中的每个prop大写换成小写，并且在前面加“-”）

将6中的

<div id='app'>
<my-component name="jiangjiang" come-from="guilin"></my-component>
<!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
</div>
改成

<div id='app'>
<my-component name="jiangjiang" comeFrom="guilin"></my-component>
<!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
</div>
显示效果，第二个没有显示

异步组件的实现原理；异步组件的3种实现方式---工厂函数、Promise、高级函数

异步组件实现的本质是2次渲染，先渲染成注释节点，当组件加载成功后，在通过forceRender重新渲染

高级异步组件可以通过简单的配置实现loading   resolve   reject   timeout  4种状态

vue --》组件的封装 及 参数的传递的更多相关文章

  1. vue2.0 如何自定义组件（vue组件的封装）

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  2. Vue组件开发实践之scopedSlot的传递

    收录待用,修改转载已取得腾讯云授权 导语 现今的前端开发都讲究模块化组件化,即把公共的交互和功能封装到一个个的组件之中,在开发整体界面的时候就能像搭积木一样快速清晰高效.在使用Vue开发我们的vhtm ...

  3. vue组件4 利用slot将内容传递给组件

    除了将数据作为prop传入到组件中,vue也允许传入HTML 父组件中的子组件:<custom-button>点我<custom-button/> custom-button子 ...

  4. vue 组件的封装

    封装的原因 首先封装组件的需求肯定是多个地方要用到同一个东西,他们都有公共的地方,vue的封装 简单来说就是将公共参数封装起来 然后在需要的地方引入 //子组件封装 <template> ...

  5. vue组件间的数据和方法传递

    方法 1.父组件调用子组件:ref(在子组件中加上ref即可通过this.$refs.ref.method调用) 2.子组件调用父组件:emit(this.$emit(调用的方法名,传递的参数)) 数 ...

  6. 认识Vue组件

    前言 Vue.js是一套构建用户界面的渐进式框架(官方说明).通俗点来说,Vue.js是一个轻量级的,易上手易使用的,便捷,灵活性强的前端MVVM框架.简洁的API,良好健全的中文文档,使开发者能够较 ...

  7. vue组件学习(二)

    父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...

  8. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  9. 封装Vue组件的一些技巧

    封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...

随机推荐

  1. linux系统特殊权限位 suid、sgid、sticky

    linux系统特殊权限位 suid.sgid.stickysuid 使任意用户获得用文件属主相同的权限,sgid使用户获得与文件属组相同的权限(通过sgid获得的权限等同于同一用户组的权限) 表示方法 ...

  2. jupyter notebook添加环境

    列出当前kernel: jupyter kernelspec list 删除已有环境:jupyter kernelspec remove NAME 安装新kernel ipython kernel i ...

  3. Python核心技术与实战——十一|程序的模块化

    我们现在已经总结了Python的基本招式和套路,现在可以写一些不那么简单的系统性工程或代码量较大的应用程序.这时候,一个简单的.py文件就会显得过于臃肿,无法承担一个重量级软件开发的重任.这就需要这一 ...

  4. POJ 1966 Cable TV Network （最大流最小割）

    $ POJ~1966~Cable~TV~Network $ $ solution: $ 第一眼可能让人很难下手,但本就是冲着网络流来的,所以我们直接一点.这道题我们要让这个联通图断开,那么势必会有两个 ...

  5. VMmare下安装redhat

    一.虚拟机必须安装在自定义的文件夹下,虚拟硬盘文件必须存放在自定义路径下(避免中文) 二.安装时选择linux类型时必须选择red hat enterprise linux 5 64位 三.操作系统名 ...

  6. Quantitative Strategies for Achieving Alpha（一）

    1. 怎么构建测试 所有的测试五等分,表明我们的回测的universe被分为五个组,根据我们要测试的公司因子的值. Quintiles provide a clear answer to that q ...

  7. react native之使用AsyncStorage 进行数据持久化存储

    新建AsncStorageDemoPage.js import React, {Component} from 'react'; import { StyleSheet, View, Text, Bu ...

  8. php下载文件夹目录下的文件

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  9. 【bzoj1176】[Balkan2007]Mokia

    题目描述: 维护一个W*W的矩阵,初始值均为S.每次操作可以增加某格子的权值,或询问某子矩阵的总权值.修改操作数M<=160000,询问数Q<=10000,W<=2000000. 输 ...

  10. 重新理解了重定向，利用重定向可以防止用户重复提交表单（兼谈springmvc重定向操作）

    自己用springmvc框架有一段时间了,但是都还一直分不清楚什么时候应该用转发,什么时候应该用重定向.可能用转发的情形太多了,以致于自己都忘记了还有重定向. 当用户提交post请求之后,刷新页面就会 ...