Vue-学习笔记-09 深入组件化开发与组件通信
文章目录一、什么是组件?二、Vue中的组件?三、注册组件的基本步骤3.1 知识储备3.2 第一种方式使用全局组件(coderwhy)3.3 第二种方式使用全局组件(MrLiuQuan)3.4 局部组件3.5 父组件和子组件一、什么是组件?在看组件之前,我们先来看这样一个问题,人面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大
一、什么是组件?
在看组件之前,我们先来看这样一个问题,人面对复杂问题的处理方式:
任何一个人处理信息的逻辑能力都是有限的
所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。
但是,我们人有一种天生的能力,就是将问题进行拆解。
如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。
组件化也是类似的思想:
如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。
但如果,我们讲一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
二、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'>
<!-- 3. 使用组件 -->
<my-cpn></my-cpn>
</div>
<script src='../js/vue.js'></script>
<script>
// 1.创建组件构造器
let cpnContructor = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<h2>我是内容,哈哈哈哈哈</h2>
<h2>我是内容,呵呵呵呵呵呵</h2>
</div>
`
})
// 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: `
<div>
<h2>我是标题</h2>
<h2>我是内容,哈哈哈哈哈</h2>
<h2>我是内容,呵呵呵呵呵呵</h2>
</div>
`
})
let vm = new Vue({
el: '#app',
data: {
message: 'test'
},
// 注册局部组件
components:{
cpn:cpnC
}
})
</script>
</body>
3.4 父组件和子组件
<body>
<div id='app'>
<!-- 如果没有单独注册则不能使用 -->
<!-- <cpn1></cpn1> -->
<cpn2></cpn2>
</div>
<script src='../js/vue.js'></script>
<script>
// 1、创建第一个组件构造器 (子组件)
let cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标题1</h2>
<h2>我是内容1,哈哈哈哈哈</h2>
</div>
`
})
// 2、创建第二个组件构造器 (父组件)
let cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<h2>我是内容2,呵呵呵呵呵</h2>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
// root 根组件
let vm = new Vue({
el:'#app',
data:{
message:'test'
},
components:{
// cpn1:cpnC1,
cpn2:cpnC2
}
})
</script>
</body>
效果:
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:`
<div>
<h2>我是标题1</h2>
<h2>我是内容1,哈哈哈哈哈</h2>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
message:'test'
},
// 语法糖方式注册局部组件
components:{
"cpn2":{
template:`
<div>
<h2>我是标题2</h2>
<h2>我是内容2,哈哈哈哈哈</h2>
</div>
`
}
}
})
</script>
</body>
效果:
3.6 组件模板的抽离
有以下两种方式:
- script标签,注意:类型必须是 text/x-template
- template标签
这两种方式都必须给定一个id
属性,以便template
模板能够绑定到。
<body>
<div id='app'>
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<!-- 1、script标签,注意:类型必须是 text/x-template -->
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题1</h2>
<p>我是内容哈哈哈1</p>
</div>
</script>
<!-- 2、template标签 -->
<template id="cpn2">
<div>
<h2>我是标题2</h2>
<p>我是内容哈哈哈2</p>
</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>
<!-- 1、script标签,注意:类型必须是 text/x-template -->
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题1</h2>
<p>我是内容哈哈哈1</p>
</div>
</script>
<!-- 2、template标签 -->
<template id="cpn2">
<div>
<h2>{{title}}</h2>
<p>我是内容哈哈哈2</p>
</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'>
<!-- v-bind:需要传递给谁="传递的数据" -->
<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'>
<!-- 这里在接收到子组件的值时,不需要显示传递,因为它可以隐士传递并且不会和event冲突,因为它没有浏览器的事件对象-->
<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 插槽的基本使用
- 插槽的基本使用
<slot> </slot>
- 插槽的默认值
<slot>button</slot>
- 如果有多个值,同时放入到组件进行替换时,会一起作为替换元素
<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>
<!-- v-slot 有语法糖 v-slot:header 可以简写为 #header -->
<template #header>
<h1>Here might be a page title</h1>
</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 info</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.3 作用域插槽
父组件替换插槽的标签,但是内容由子组件来决定
子组件通过v-bind
绑定一个属性值,属性值名是自定义的 注意避免使用大写
的name,因为mustache在此处解析时不认识大写。
父组件通过v-slot:组件名=“属性名”
接收该值:
<div id='app'>
<!-- 目的是拿到子组件里边的pLanguages -->
<cpn>
<!-- 此处的 #header 是 v-slot:header的语法糖 此处的 son 是自定义的 -->
<template #header="son">
<span>{{son.headerdata.join(" - ")}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<header>
我是header
<!-- 此处的headerdata是自定义的 -->
<slot name="header" :headerdata="pLanguages">
我是header slot
</slot>
</header>
</div>
</template>
6.3.1 作用域插槽 2.6.0 以前的写法
<body>
<div id='app'>
<cpn></cpn>
<cpn>
<!-- 目的是拿到子组件里边的pLanguages -->
<template slot-scope="slot">
<!-- 替换默认的内容 -->
<!-- <span v-for="item in slot.mydata">{{item}}-</span> -->
<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'>
<!-- 目的是拿到子组件里边的pLanguages -->
<cpn>
<!-- 此处的 #header 是 v-slot:header的语法糖 此处的 son 是自定义的 -->
<template #header="son">
<span>{{son.headerdata.join(" - ")}}</span>
</template>
<template #footer="footer">
<span>替换掉footer slot的内容</span>
<!-- 此处的mustache 只支持小写(写小写可以匹配组件的大小写 写大写不匹配) -->
<span>{{footer.copyright}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<header>
我是header
<!-- 此处的headerdata也是自定义的 此处不建议使用大写,此处的mustache写法不支持大写-->
<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>
效果:
更多推荐
所有评论(0)