组件化开发
注册组件的基本步骤
1.创建组件构造器
Vue.extend()
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时,传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方,要显示的HTML代码。
这种写法在Vue2.x的文档中几乎看不到了,它会使用语法糖,但是在很多资料中还是会提到这种方式。
2.注册组件
Vue.component()
调用Vue.component()是将组件构造器注册为一个组件,并且给它起一个组件的标签名称。
所以需要传递两个参数:1、注册组件的标签名 2、组件构造器
3.使用组件
根据标签名使用标签
使用示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 3. 使用组件 -->
<gy></gy>
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建组件构造器对象
const gytem = Vue.extend({
template:`
<div>
<h2>标题</h2>
<p>内容</p>
</div>`
})
// 2. 注册组件(全局组件)
Vue.component('gy', gytem)
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
}
})
</script>
</body>
</html>
全局组件 和 局部组件
描述
注册全局组件和局部组件的步骤大致相同
创建组件构造器 → 注册组件 → 使用组件
全局组件
注册组件的位置在全局 即是全局组件
可在任意Vue示例下使用
局部组件
注册组件的位置在Vue实例对象的components内 即是局部组件
只能在单个Vue实例下使用
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 3. 使用组件 -->
<gy></gy>
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建组件构造器对象
const gytem = Vue.extend({
template:`
<div>
<h2>标题</h2>
<p>内容</p>
</div>`
})
// 2. 注册全局组件
// Vue.component('gy', gytem)
const app = new Vue({
el: '#app',
data: {},
methods: {},
// 2.注册局部组件
components: {
gy: gytem
}
})
</script>
</body>
</html>
父组件 和 子组件
描述:
- 即是两个组件 我们在父组件中注册子组件
- 我们可以在父组件的template模板中使用子组件
- 如果要在其他位置使用子组件 需要在对应的实例中注册组件
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<c2></c2>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建子组件
const cpn1 = Vue.extend({
template: `
<div>
<p>子组件</p>
</div>`
})
// 创建父组件
const cpn2 = Vue.extend({
template: `
<div>
<p>父组件</p>
<c1></c1>
</div>`,
components: {
// 在父组件中注册子组件
c1 : cpn1
}
})
// Vue 实例 root组件
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
// 在Vue实例中注册父组件
c2 : cpn2
}
})
</script>
</body>
</html>
组件语法糖
即是将创建组件合并到注册组件步骤中
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<c1></c1>
<c2></c2>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('c1', {
template: `
<div>
<h2>全局组件语法糖</h2>
</div>`
})
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
c2: {
template: `
<div>
<h2>局部组件语法糖</h2>
</div>`
}
}
})
</script>
</body>
</html>
template 模板分离
示例:
1.<script>
标签
2.<template>
标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id ="app">
<cpn></cpn>
</div>
<!-- 1.script标签, 注意:类型必须是text/x-template -->
<!-- <script type="text/x-template" id="cpn">
<div>
<p>内容</p>
</div>
</script> -->
<!-- 2.template标签 -->
<template id="cpn">
<div>
<p>内容</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 全局组件
Vue.component('cpn', {
template: '#cpn'
})
const app = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
组件数据存放
- 我们在使用组件属性时会将属性存放在对应组件的data中
- 如果放在root组件中会造成数据冗余,而且也不能获取到属性值
- 只是这个data属性必须是一个函数
而且这个函数返回一个对象,对象内部保存着数据
示例:
<script>
Vue.component('cpn', {
template: '#cpn',
// *************
data() {
return {
title: 'abc'
}
}
// *************
})
</script>
组件中的data返回函数
- 设计时就要求返回函数不然会报错
- 因为组件是需要复用的,因此这里要返回函数使每个复用的组件中使用的属性值都是独立的对象,不让他们互相干扰。