主要内容:
1. 组件的基本使用
2. 全局组件和局部组件
3. 父组件和子组件
4. 组件语法糖的写法
5. 组件data关联的写法
6. 父子组件的通信
组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：
例如上面页面, 页面整体分为三个部分. 我们可以将每一个部分设计为一个组件. 然后将三个组件组成一个页面. 每一个组件又是由多个小组件构成的.
组件可以让模块可复用性提高. 是一种提倡的用法
一. 组件的基本使用
构建一个组件分为三个部分:
- 定义组件
- 注册组件
- 使用组件
下面, 我们就从这三个部分来定义一个组件
1. 定义组件
语法:
Vue.extend({
template: ""
})
定义组件使用Vue.extend({})然后在里面定义一个template, 我们看到template的内容是html内容,
为了让html能够按照格式显示, 我们使用``将内容框起来
下面我们来注册一个组件
const cpnC = Vue.extend({
template: `<div>
<h2>aaa</h2>
<p>组件内容1</p>
<p>组件内容2</p>
</div>`
})
2. 注册组件
语法:
Vue.component("组件名称", 组件内容)
我们将上面定义的组件进行注册
// 2. 注册组件
Vue.component('my-first-comp', cpnC)
3. 使用组件
<div id="app">
<my-first-comp></my-first-comp>
</div>
直接使用组件名即可
完整源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 注册组件的基本步骤
-->
<div id="app">
<my-first-comp></my-first-comp>
</div> <script src="../js/vue.js"></script>
<script>
// 1. 创建组件构造器对象
/**
* 调用vue.extend()创建一个组件
* 传入的template代表我们自定义组件的模板
* vue2.x以后基本看不到这种写法, 会直接使用语法糖创建, 但原理还是这个.
*
* @type {VueComponent|void}
*/
const cpnC = Vue.extend({
template: `<div>
<h2>aaa</h2>
<p>组件内容1</p>
<p>组件内容2</p>
</div>`
}) // 2. 注册组件
Vue.component('my-first-comp', cpnC) var app = new Vue({
el: "#app",
data: {
message: "hello"
}
});
</script>
</body>
</html>
二. 全局组件和局部组件
1. 全局组件
组件有全局组件和局部组件的概念, 如果将一个组件定义在外部就是全局组件
// 定义一个组件
const myComp = Vue.extend({
template: `
<div>
<p>你好!!</p>
</div>
`
})
// 注册组件(这种方式注册的组件是全局组件)
Vue.component('my-comp', myComp) let app = new Vue({
el: "#app",
data: {
message: "hello"
}
});
第一步: 定义了一个组件
第二步: 注册组件, 在new Vue({})外面注册的, 是全局组件.
第三步: 调用组件
<div id="app2">
<my-comp></my-comp>
</div>
以上定义的就是一个全局组件. 全局组件什么概念呢? 也就是说任何一个Vue实例对象都可以使用.
下面定义了两个Vue对象
let app = new Vue({
el: "#app",
data: {
message: "hello"
},
components:{
app1Comp: app1Comp
}
});
let app2 = new Vue({
el: "#app2"
})
第一个作用对象是id="app"的div, 第二个作用对象是id="app2"的div
<div id="app">
<my-comp></my-comp>
<app1-comp></app1-comp>
</div> <div id="app2">
<my-comp></my-comp>
<app1-comp></app1-comp>
</div>
我们在里面调用组件, 都可以成功.
全局组件, 一次注册, 多处调用
2. 局部组件
const app1Comp = Vue.extend({
template: `
<div>
<p>只有app1才能使用的组件</p>
</div>
`
})
let app = new Vue({
el: "#app",
data: {
message: "hello"
},
components:{
app1Comp: app1Comp
}
});
我们定义了一个appComp的组件, 但是注册的时候, 只注册到了app这个Vue对象里, 那么就只有app能使用,其他vue对象不能使用, 这样的组件就是局部组件.
局部组件, 哪里注册, 哪里调用
三. 父组件和子组件
像这种有嵌套关系的组件, 就是父子组件.
那么父组件和子组件如何定义呢?
首先, 定义了一个组件1--comp1
// 定义组件1
const comp1 = Vue.extend({
template: `
<div>
<p>组件1</p>
</div>
`
})
然后定义了一个组件2---comp2
// 定义组件2
const comp2 = Vue.extend({
template: `
<div>
<h2>组件2</h2>
<comp1></comp1>
</div>
`,
components:{ // 局部组件
comp1: comp1
}
})
我们发现, 在组件comp2中注册了comp1组件, 这里comp2是父组件, comp1是子组件.
最后我们可以把comp2注册到Vue对象上, 在页面就可以调用了
// vue也是一个组件, 是一个root根组件
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
components:{
comp2: comp2
}
});
vue也是一个组件, 是一个root根组件
四. 组件语法糖的写法
在vue2之后, 就很少看到Vue.extend({})的写法了, 而是使用语法糖
// 语法糖的写法
Vue.component('comp2', {
template: '<div><h2>你好, 语法糖写法!</h2></div>'
})
直接注册Vue组件
但是, 这么写会将html代码和组件纽在一起, 下面就说说如何将组件和模板分开
五. 模板和组件分离
我们有单独的方式定义模板代码. 有两种方法
第一种: script写法
<!-- 第一种方式: 使用script -->
<script type="text/x-template" id="comp2">
<div>
<h2>组件和模板分离的写法1</h2>
</div>
</script>
使用script, 需要将type设置为text/x-template. 然后给模板设置一个id, 就代表一个模板了
然后, 注册模板
Vue.component('comp2', {
template: comp2
})
接下来就可以调用组件了
<div id="app">
<comp2></comp2>
</div>
第二种: template写法
推荐使用第二种写法
<template id="comp3">
<div>
<h3>组件模板分离的第二种写法</h3>
</div>
</template>
使用template标签, 并为其定义一个id, 组件的定义是一样的
Vue.component('comp3', {
template: comp3
})
五. 组件data关联的写法
组件中如果有变量, 怎么办呢? 我们知道在vue实例中, 变量可以定义在data中, 在组件中也有data属性, 但这个data属性是一个方法
例如: 我们定义了一个组件, 其中有一个变量title
<template id="comp1">
<div>
<h2>这是一个组件:{{title}}</h2> </div>
</template>
我们在注册组件的时候, 可以定义一个data函数, 并在返回值输出title属性
Vue.component('comp1', {
template: comp1,
data() {
return {
title: 'vue组件'
}
}
})
这样就可以拿到属性的值了. data()方法里面定义一个return返回值, 返回值是一个对象.
这样写有些奇怪是不是? 那为什么要写成方法呢?
协程组件, 我们的目的是复用, 在多处使用, 如果定义成一个变量值, 在一处修改, 其他调用的的地方也会跟着修改, 这不是我们希望看到的.
而方法是有作用域的, 每一个匿名方法都有自己的地址空间, 所以, 变量是不共享. 达到了相互隔离的目的.
那么, 如果就想共享怎么办呢? , 我们可以将变量提取出来. 如下写法:
// 如何让所有组件共享变量呢
let shareData = {
title: "组件共有的title"
} Vue.component('comp2', {
template: comp2,
data(){
return shareData
}
})
这样每次返回的都是一个地址, 所以, 变量之间是共享的.
六. 父子组件的通信
什么是父子通讯呢? 我们来看看京东官网
可以吧这个页面看成是大组件, 里面有4个子组件构成: 上面是导航, 左边是栏目导航, 点击栏目导航右侧跟着变化.
我们来分析一下:
数据是在最外层的data里面, 然后循环遍历获取左侧导航, 当点击左侧导航的时候, 需要将参数传递给父组件, 然后发起新的请求, 在渲染到子组件中.
这就是父子通讯.
父子通讯分为父传子和子传父两种方式
1. 父传子组件的通讯
父子通讯有两种方式: 一种是数组, 一种是对象
我们在vue对象中定义了两个属性: message和languages
let app = new Vue({
el: "#app",
data: {
message: "父元素传递值给子元素111",
languages:["go", "php", "python", "java", "c语言"]
}
});
然后要在模板中使用这两个属性, 要怎么样才能拿到属性呢?
在模板中使用props来接收属性, 使用props接收属性有两种方式:
1) 父子通讯方式---数组方式
第一种是使用数组的方式. 我们在数组中定义两个变量来接收Vue对象中的两个属性.
Vue.component("comp1", {
template: "#comp1",
props:["clanguages", "cmessage"]
})
然后, 在模板里怎么写呢? 如下:
<template id="comp1">
<div>
<p>{{cmessage}}</p>
<ul>
<li v-for="item in clanguages">{{item}}</li>
</ul>
</div>
</template>
接下来绑定组件变量和vue对象变量的关系, 在哪里调用组件, 就在哪里绑定
<div id="app">
<comp1 :clanguages="languages" :cmessage="message"></comp1>
</div>
绑定的时候其实使用的是v-bind. 将组件的属性clanguage绑定到vue对象, 可以这么写:
:clanguages="languages"
这样就完成了绑定
其实总结有三步骤:
1. 在vue对象中定义属性
2. 在模板组件中定义与vue属性接收的变量
3. 在模板中绑定他们之间的关系
2) 父子通讯方式---对象方式
除了使用数组的方式来接收, 还可以使用对象的方式来接收
// props的对象写法
Vue.component('comp2', {
template: "#comp2",
props:{
clanguages: {
type: Array, // 设置传值的类型必须是数组类型
default: [], // 默认值是空数组
required: true // 如果设置为true, 这个值必须传, 如果不传将报错
},
cmessage: {
type: String,
default: "aa",
required: true
}
}
})
props接收的是一个对象, clanguages对象里面可以定义接收数据有三种
- 类型type,
- 默认值default
- 是否是必须有这个属性required: 这个属性的含义是, 调用了组件必须要使用这个属性.
其他使用方法可以参考文章: https://www.cnblogs.com/em2464/p/10418820.html
2. 子传父自定义事件
父传子使用的是定义属性接收, 而子传父使用的是定义事件的方式.
就使用上面的例子, 点击类型传参给父对象.
Vue.component('comp1', {
template: "#comp1",
data() {
return {
"types":[
{id:1, name:"手机类"},
{id:2, name:"日用品"},
{id:3, name:"空调类"},
{id:4, name:"电脑设备"},
{id:5, name:"家用电器"},
]
}
}
}
上面定义了一个组件, 组件定义了商城产品的类型
template id="comp1">
<div>
<button v-for="item in types" @click="clicktype(item)">{{item.name}}</button>
</div>
</template>
定义一个组件模板, 循环遍历商品类型, 并定义了一个点击事件. clicktype(item)
Vue.component('comp1', {
template: "#comp1",
data() {
return {
"types":[
{id:1, name:"手机类"},
{id:2, name:"日用品"},
{id:3, name:"空调类"},
{id:4, name:"电脑设备"},
{id:5, name:"家用电器"},
]
}
},
methods:{
clicktype(item) {
this.$emit('itemclick',item)
console.log("点击类型", item)
}
}
})
在点击事件中, 我们使用this.$emit('itemclick', item)定义了一个事件, 并将元素对象item传递给了事件.
那么父组件如何接受这个事件呢?
父组件需要定义这个事件的监听. 通常我们都是监听点击事件click, 按键事件input等自带事件, 这里需要监听的是自定义事件
<div id="app">
<comp1 @itemclick="itemClick"></comp1>
</div>
监听事件使用v-on:事件名称, 简写为@itemclick. 然后在父组件定义时间itemClick
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods:{
itemClick(item) {
console.log("传递事件到父组件", item)
}
}
});
这样就可以接收到子组件传递过来的数据了.
总结一下:
1. 在模板中定义一个事件, 调用this.$emit('事件名称', 传递参数....)
2. 在模板调用的时候监听事件. @事件名称="方法名()"
3. 在父组件中定义方法来接收事件监听.
案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 2. 绑定事件 -->
<comp1 @itemclick="itemClick"></comp1>
</div>
<template id="comp1">
<div>
<button v-for="item in types" @click="clicktype(item)">{{item.name}}</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('comp1', {
template: "#comp1",
data() {
return {
"types":[
{id:1, name:"手机类"},
{id:2, name:"日用品"},
{id:3, name:"空调类"},
{id:4, name:"电脑设备"},
{id:5, name:"家用电器"},
]
}
},
methods:{
clicktype(item) {
// 1. 注册事件
this.$emit('itemclick',item)
console.log("点击类型", item)
}
}
})
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods:{
// 3.接收事件
itemClick(item) {
console.log("传递事件到父组件", item)
}
}
});
</script>
</body>
</html>
效果如下图