Vue-学习笔记-09 深入组件化开发与组件通信
文章目录
- 一、什么是组件？
- 二、Vue中的组件?
- 三、注册组件的基本步骤
- 3.1 知识储备
- 3.2全局组件
- 3.3 局部组件
- 3.4 父组件和子组件
- 3.5 注册组件的语法糖
- 3.6 组件模板的抽离
- 3.7 组件的data
- 3.8 组件的data必须是一个函数的原理
- 四、组件之间的通信
- 4.1 父组件向子组件传递数据 props
- 4.2 prop 验证
- 4.3 props驼峰的问题
- 4.4 自定义事件 $emit 子传父
- 五、父子组件的访问方式
- 5.1 父访问子 $children $refs
- 5.2 子访问父 $root $parent
- 六、slot 插槽
- 6.1 插槽的基本使用
- 6.2 具名插槽的使用
- 6.2.1 (2.6.0)版本及以前的写法
- 6.2.2 (2.6.0)之后的版本新增写法 v-slot（推荐）
- 6.3 作用域插槽
- 6.3.1 作用域插槽 2.6.0 以前的写法
- 6.3.2 作用域插槽 2.6.0之后的写法(推荐)
一、什么是组件？
在看组件之前，我们先来看这样一个问题，人面对复杂问题的处理方式：
任何一个人处理信息的逻辑能力都是有限的
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
但是，我们人有一种天生的能力，就是将问题进行拆解。
如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
组件化也是类似的思想：
如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。
二、Vue中的组件?
组件化是Vue.js中的重要思想
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。
组件化思想的应用：
有了组件化的思想，我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理，并且扩展性也更强。
所以，组件是Vue开发中，非常重要的一个篇章。
三、注册组件的基本步骤
组件命名方式：短横线方式、驼峰方式
组件注册注意事项
如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板种用驼峰的方式使用组件,但是在普通的标签模板种，必须使用短横线的方式使用组件。
3.1 知识储备
-
Vue.extend()：
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。 -
Vue.component()：
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
3.2全局组件
<body>
<div id='app'>
<my-cpn>my-cpn>
div>
<script src='../js/vue.js'>script>
<script>
// 1.创建组件构造器
let cpnContructor = Vue.extend({
template:`
我是标题
我是内容，哈哈哈哈哈
我是内容，呵呵呵呵呵呵
`
})
// 2.注册组件
Vue.component("myCpn",cpnContructor);
let vm = new Vue({
el:'#app',
data:{
message:'test'
},
})
script>
body>
3.3 局部组件
<body>
<div id='app'>
<cpn>cpn>
div>
<script src='../js/vue.js'>script>
<script>
// 1、创建组件构造器
let cpnC = Vue.extend({
template: `
我是标题
我是内容，哈哈哈哈哈
我是内容，呵呵呵呵呵呵
`
})
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
// 注册局部组件
components:{
cpn:cpnC
}
})
script>
body>
3.4 父组件和子组件
<body>
<div id='app'>
<cpn2>cpn2>
div>
<script src='../js/vue.js'>script>
<script>
// 1、创建第一个组件构造器 (子组件)
let cpnC1 = Vue.extend({
template:`
我是标题1
我是内容1，哈哈哈哈哈
`
})
// 2、创建第二个组件构造器 (父组件)
let cpnC2 = Vue.extend({
template:`
我是标题2
我是内容2，呵呵呵呵呵
效果：
3.5 注册组件的语法糖
在上面注册组件的方式，可能会有些繁琐。
Vue为了简化这个过程，提供了注册的语法糖。
主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替。
<body>
<div id='app'>
<cpn1>cpn1>
<cpn2>cpn2>
div>
<script src='../js/vue.js'>script>
<script>
// 语法糖方式注册全局组件
Vue.component("cpn1",{
template:`
我是标题1
我是内容1，哈哈哈哈哈
`
})
let vm = new Vue({
el:'#app',
data:{
message:'test'
},
// 语法糖方式注册局部组件
components:{
"cpn2":{
template:`
我是标题2
我是内容2，哈哈哈哈哈
`
}
}
})
script>
body>
效果:
3.6 组件模板的抽离
有以下两种方式:
- script标签，注意：类型必须是 text/x-template
- template标签
这两种方式都必须给定一个id属性，以便template模板能够绑定到。
<body>
<div id='app'>
<cpn1>cpn1>
<cpn2>cpn2>
div>
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题1</h2>
<p>我是内容哈哈哈1</p>
</div>
script>
<template id="cpn2">
<div>
<h2>我是标题2h2>
<p>我是内容哈哈哈2p>
div>
template>
<script src='../js/vue.js'>script>
<script>
// 1、全局script
Vue.component("cpn1",{
// template:"#cpn1"
})
// 2、全局template
Vue.component("cpn2",{
// template:"#cpn2"
})
let vm = new Vue({
el:'#app',
data:{
message:'test'
},
//局部组件注册
components:{
"cpn1":{
template:"#cpn1"
},
"cpn2":{
template:"#cpn2"
}
}
})
script>
body>
效果：
3.7 组件的data
首先我们需要知道，组件内部是不能访问我们实例的数据的。
那么组件自己的数据存放在哪里呢?
组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据
<body>
<div id='app'>
<cpn1>cpn1>
<cpn2>cpn2>
div>
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题1</h2>
<p>我是内容哈哈哈1</p>
</div>
script>
<template id="cpn2">
<div>
<h2>{{title}}h2>
<p>我是内容哈哈哈2p>
div>
template>
<script src='../js/vue.js'>script>
<script>
// 1、全局script
Vue.component("cpn1", {
// template:"#cpn1"
})
// 2、全局template
Vue.component("cpn2", {
template: "#cpn2",
data: function () {
return {
title:"这是标题newnewnew"
}
}
})
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
components: {
"cpn1": {
template: "#cpn1"
},
// "cpn2":{
// template:"#cpn2"
// }
}
})
script>
body>
效果：
3.8 组件的data必须是一个函数的原理
- 首先，如果不是一个函数，Vue直接就会报错。
- 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。
官方文档的解释：
-
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
-
如果 Vue 没有这条规则，点击一个按钮就可能会影响到其它组件
必须是一个函数的原理：
JS示例代码：
<script>
// 不影响 内存地址不一样
function abc(){
return{
name:'why',
age:18
}
}
let obj1 = abc()
let obj2 = abc()
let obj3 = abc()
obj1.name='test'
console.log('obj1.name: ', obj1.name);
console.log('obj2.name: ', obj2.name);
console.log('obj3,name: ', obj3.name);
// 相互影响 内存地址一样
let obj = {
name:"Mr",
age:16
}
function test(){
return obj
}
let test1 = test()
let test2 = test()
let test3 = test()
test1.name='test'
console.log('test1.name: ', test1.name);
console.log('test2.name: ', test2.name);
console.log('test3,name: ', test3.name);
</script>
效果：
四、组件之间的通信
在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的。
但是，在开发中，往往一些数据确实需要从上层传递到下层：
比如在一个页面中，我们从服务器请求到了很多的数据。
其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。
如何进行父子组件间的通信呢？Vue官方提到
- 通过props向子组件传递数据 props=>properties(属性)
- 通过事件向父组件发送消息。
4.1 父组件向子组件传递数据 props
<body>
<div id='app'>
<cpn :cmovies="movies" :cmsg="message">cpn>
div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}li>
ul>
<h2>{{cmsg}}h2>
div>
template>
<script src='../js/vue.js'>script>
<script>
// 父传子 props
let cpn = {
template: "#cpn",
// props: ['cmovies','cmsg'],
props: {
// 1、限制类型
// cmovies: Array,
// cmsg: String,
// 2、匹配多个类型
// cmovies: [String,Array],
// 3、限制类型 默认值 是否必须
cmsg:{
type:String,
default:"aaaaaaaaaa",
required:true
},
// 4、类型是对象或者数组 默认值必须是一个函数
cmovies:{
type:Array,
default:function (){
return []
},
required:true
}
},
}
let vm = new Vue({
el: '#app',
data: {
message: '测试文本',
movies: ['海王', '海贼王', '海尔兄弟']
},
components: {
"cpn": cpn
}
})
script>
body>
效果：
4.2 prop 验证
官网直达:prop 验证
我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
4.3 props驼峰的问题
如果我们组件内部使用的是驼峰命名方式的话，在组件传递值的时候需要把驼峰处切换成用 -线连接的方式。
<body>
<div id='app'>
<cpn :c-info="info" :child-my-message="message">cpn>
div>
<template id="cpn">
<div>
<h2>{{cInfo}}h2>
<h2>{{childMyMessage}}h2>
div>
template>
<script src='../js/vue.js'>script>
<script>
let cpn = {
template:"#cpn",
props:{
cInfo:{
type:Object,
default:function (){
return {}
},
},
childMyMessage:{
type:String,
default:''
}
}
}
let vm = new Vue({
el:'#app',
data:{
info:{
name:"peng",
age:18,
height:1.75
},
message:"这是 message"
},
components:{
"cpn":cpn
}
})
script>
body>
4.4 自定义事件 $emit 子传父
子组件发射事件 > 父组件监听该事件 > 接收使用
props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。
什么时候需要自定义事件呢？
当子组件需要向父组件传递数据时，就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。
自定义事件的流程：
- 在子组件中，通过$emit()来触发事件。
- 在父组件中，通过v-on来监听子组件事件。
<body>
<div id='app'>
<cpn @item-click="cpnClick">cpn>
div>
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">{{item.name}}button>
div>
template>
<script src='../js/vue.js'>script>
<script>
//1、子组件
let cpn = {
template: "#cpn",
data() {
return {
categories:[
{id:"a",name:"热门推荐"},
{id:"b",name:"手机数码"},
{id:"c",name:"家用家电"},
{id:"d",name:"电脑办公"},
]
}
},
methods: {
btnClick:function(item){
// console.log(item);
// 发射事件名称,传递的参数
this.$emit('item-click',item)
}
},
}
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
methods: {
cpnClick:function(item){
console.log(item);
}
},
components:{
"cpn":cpn
}
})
script>
body>
五、父子组件的访问方式
有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。
父组件访问子组件：使用 c h i l d r e n 或 children或 children或refs reference(引用)
子组件访问父组件：使用$parent
5.1 父访问子 $children $refs
<body>
<div id='app'>
<cpn>cpn>
<cpn>cpn>
<cpn ref='aaa'>cpn>
<button @click="btnClick">按钮button>
div>
<template id="cpn">
<div>
我是子组件
div>
template>
<script src='../js/vue.js'>script>
<script>
let vm = new Vue({
el:'#app',
data:{
message:'test'
},
methods:{
btnClick(){
// 1、$children
// console.log(this.$children);
// this.$children[0].showMessage();//show
// console.log(this.$children[0].name);//我是子组件的data
// for(let item of this.$children){
// item.showMessage();
// console.log(item.name);
// }
// 2、$refs => 对象类型 默认是空对象 需要在我们的子组件上加 ref属性
console.log(this.$refs.aaa.name);//我是子组件的data
}
},
components:{
cpn:{
template:"#cpn",
methods: {
showMessage(){
console.log("show");
}
},
data() {
return {
name:"我是子组件的data"
}
},
}
}
})
script>
body>
效果：
5.2 子访问父 $root $parent
<body>
<div id='app'>
<cpn>cpn>
div>
<template id="cpn">
<div>
<h2>我是cpn组件h2>
<ccpn>ccpn>
div>
template>
<template id="ccpn">
<div>
<h2>我是子子组件h2>
<button @click="btnClick">按钮button>
div>
template>
<script src='../js/vue.js'>script>
<script>
let vm = new Vue({
el:'#app',
data:{
message:'test'
},
components:{
cpn:{
template:"#cpn",
data() {
return {
name:"我是cpn组件的name"
}
},
components:{
ccpn:{
template:"#ccpn",
methods: {
btnClick(){
//1、访问父组件
console.log(this.$parent.name);//我是cpn组件的name
console.log(this.$root.message);//test
}
},
}
}
},
}
})
script>
body>
效果：
六、slot 插槽
组件的插槽是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
例子：移动网站中的导航栏。
移动开发中，几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件，比如nav-bar组件。
一旦有了这个组件，我们就可以在多个页面中复用了。
警告：本文所使用的插槽在Vue 2.6 以上已经废弃了！但还支持使用
6.1 插槽的基本使用
- 插槽的基本使用
- 插槽的默认值
button - 如果有多个值，同时放入到组件进行替换时，会一起作为替换元素
<body>
<div id='app'>
<cpn><span>有BUG发生span>cpn>
<cpn><span>有一个警告span>cpn>
<cpn>cpn>
div>
<template id="cpn">
<div>
<strong>ERROR:strong>
<slot>默认内容slot>
div>
template>
<script src='../js/vue.js'>script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
components: {
"cpn": {
template: "#cpn",
}
}
})
script>
body>
效果:
6.2 具名插槽的使用
通过name属性给slot定义一个属性名，在使用该件时，可以根据该name找到对应插槽，替换该插槽的内容
6.2.1 (2.6.0)版本及以前的写法
<body>
<div id='app'>
<cpn>
<p slot="header">标题信息p>
<p>主要内容p>
<p slot="footer">底部信息p>
cpn>
<br>
<cpn>
<template slot="header">
<p>标题信息一p>
<p>标题信息二p>
template>
<p>主要内容p>
<template slot="footer">
<p>尾部信息一p>
<p>尾部信息二p>
template>
cpn>
div>
<template id="cpn">
<div>
<header>
<slot name="header">slot>
header>
<main>
<slot>主题内容slot>
main>
<footer>
<slot name="footer">slot>
footer>
div>
template>
<script src='../js/vue.js'>script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
components: {
"cpn": {
template: "#cpn",
}
}
})
script>
body>
效果;
6.2.2 (2.6.0)之后的版本新增写法 v-slot（推荐）
v-slot 语法糖为 #
例如: v-slot:header 可以简写为 #header
基本使用:
<body>
<div id='app'>
<cpn>
<template #header>
<h1>Here might be a page titleh1>
template>
<template v-slot:default>
<p>A paragraph for the main content.p>
<p>And another one.p>
template>
<template #footer>
<p>Here's some contact infop>
template>
cpn>
div>
<template id="cpn">
<div>
<header>
<slot name="header">slot>
header>
<main>
<slot>slot>
main>
<footer>
<slot name="footer">slot>
footer>
div>
template>
<script src='../js/vue.js'>script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
components: {
"cpn": {
template: "#cpn",
}
}
})
script>
body>
效果：
6.3 作用域插槽
父组件替换插槽的标签，但是内容由子组件来决定
子组件通过v-bind绑定一个属性值,属性值名是自定义的 注意避免使用大写的name,因为mustache在此处解析时不认识大写。
父组件通过v-slot:组件名=“属性名”接收该值:
<div id='app'>
<cpn>
<template #header="son">
<span>{{son.headerdata.join(" - ")}}span>
template>
cpn>
div>
<template id="cpn">
<div>
<header>
我是header
<slot name="header" :headerdata="pLanguages">
我是header slot
slot>
header>
div>
template>
6.3.1 作用域插槽 2.6.0 以前的写法
<body>
<div id='app'>
<cpn>cpn>
<cpn>
<template slot-scope="slot">
<span>{{slot.mydata.join('-')}}span>
template>
cpn>
div>
<template id="cpn">
<div>
<ul>
<slot :mydata="pLanguages">
<li v-for="item in pLanguages">{{item}}li>
slot>
ul>
div>
template>
<script src='../js/vue.js'>script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
components: {
cpn: {
template: "#cpn",
data() {
return {
pLanguages: ['JavaScript', 'PHP', 'Java', 'TypeScript', 'C++', 'C#', 'Python', 'Go']
}
},
}
}
})
script>
body>
效果：
6.3.2 作用域插槽 2.6.0之后的写法(推荐)
官方在2.6.0之后废弃了slot-scope ,请使用 v-slot
<body>
<div id='app'>
<cpn>
<template #header="son">
<span>{{son.headerdata.join(" - ")}}span>
template>
<template #footer="footer">
<span>替换掉footer slot的内容span>
<span>{{footer.copyright}}span>
template>
cpn>
div>
<template id="cpn">
<div>
<header>
我是header
<slot name="header" :headerdata="pLanguages">
我是header slot
<span v-for="item in pLanguages">{{item}}span>
slot>
header>
<main>
我是main
<slot>
我是main slot
slot>
main>
<footer>
我是footer
<slot name="footer" :copyRight="copyRight">
我是footer slot
slot>
footer>
div>
template>
<script src='../js/vue.js'>script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
components: {
cpn: {
template: "#cpn",
data() {
return {
pLanguages: ['JavaScript', 'PHP', 'Java', 'TypeScript', 'C++', 'C#', 'Python', 'Go'],
copyRight: "泸职院彭先生版权所有"
}
},
}
}
})
script>
body>
效果:
