Vue组件封装的过程
Vue组件封装的过程
vue组件的定义
- 组件(Component)是Vue.js最强大的功能之一
- 组件可以扩展HTML元素，封装可重用代码
- 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能
- 某些情况下，组件也可以表现用 `js` 特性进行了扩展的原生的HTML元素
- 所有的Vue组件同时也都是Vue实例，所以可以接受 相同的选项对象（除了一些根级特有的选项），并提供 相同的生命周期钩子函数
vue组件的功能
- 能够把页面抽象成多个相对独立的模块
- 实现代码重用，提高开发效率和代码质量，使得代码易于维护
Vue组件封装过程
- 首先，使用Vue.extend()创建一个组件
- 然后，使用Vue.component()方法注册组件
- 接着，如果子组件需要数据，可以在props中接受定义
- 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法
组件使用流程详细介绍
1、组件创建—有3中方法，extend()
< template id=’’>
< script type=‘text/x-template’ id=’’>
var myCom = Vue.extend({
template: '<div>这是我的组件div>'
})
<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中方法，全局注册，局部注册
我们先用全局注册，注册上面例子中创建的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>
案例：
A、全局注册：新建一个html文件，引入vue.js，并且定义2个vue实例app1和app2
<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: '这是我的组件'
});
/*全局注册组件*/
Vue.component('my-com',myCom);
/*定义vue实例app1*/
var app1 = new Vue({
el: '#app1'
});
/*定义vue实例app2*/
var app2 = new Vue({
el: '#app2'
});
script>
body>
html>
显示效果：
