VUE基础篇Part7（核心功能组件）——上

秒速五厘米 2022-01-21 03:25 211阅读 0赞

# 组件 #

原因：使用组件可以提升代码的复用性，非常的方便，节省了很多时间成本。

由于组件设计的知识点较多，所以就分为两个部分写，这里先写上半部分。

主要包括以下几点：

1、组件的使用方法  
2、组件使用时的一些奇技淫巧  
3、父子组件传递数据  
4、单向数据流  
5、数据验证及命名规则  
6、组件通信

## 1、组件的使用方法 ##

组件的使用方法分为两点：全局注册和局部注册

#### 1.1、全局注册 ####

用法：Vue.component(‘tag’,\{template:’…’\})

Vue.component('tag',{ 
    	template:'<div>这里是全局注册的组件</div>'
    })
    var app = new Vue({ })
    //这里页面上就会把template的值渲染出来

注意的地方：template的内容一定需要dom元素包括起来，就算没有内容也要写

template:'<div></div>'		不写的话会报错

优点：由于是全局变量，所有的vue实例都可以使用  
缺点：权限太大，容易出错，所以尽量使用局部注册的组件

#### 1.2、局部注册 ####

用法：在vue实例中使用，在与data同级的components中写

var app = new Vue({ 
    	el:"#app",
    	data:{ },
    	components:{ 
    		'tag':{ 
    			template:'<div>这里是局部注册的组件</div>'
    		}
    	}
    })
    //页面上会显示 这里是局部注册的组件

#### 1.3、html标签限制 ####

也有部分html标签无法直接挂载组件，比如table中只有tr td tbody等元素，无法直接挂载组件。

这时候使用 is 属性来挂载组件就可以了

components: { 
    	'appTag': { 
    		template: '<div>我这里是局部注册</div>'
    	}
    }

## 2、组件使用时的一些奇技淫巧 ##

1、组件的命名使用时需按照小写字母加横杠的形式才更加规范，如：app-tag  
2、template中的内容必须被一个dom元素包括起来，不能是单纯的字符串  
3、在组件中也可以使用 data,computed,methods ，但data在使用时必须是一个方法

需求：两个按钮上各有数字，每点击一次数字增加1
    <btn-comp></btn-comp>
    <btn-comp></btn-comp>

data{ },
    components:{ 
    	'btn-comp':{ 
    		template:'<button v-on:click="count++">{ {count}}</button>',
    		data:function(){ 
    			return { 
    				count: 0
    			}
    		}
    	}
    }

## 3、父子组件之间的数据传递 ##

子组件：局部注册的组件都叫做子组件  
父组件：vue绑定的那个id="app"的div元素（根元素）就是父组件

1、在子组件中使用props从父组件接受参数，并且props中接收到的属性，都可以在子组件中直接使用  
2、props属性中的数据来自父组件，而子组件中data的返回值 return 就是子组件自己的数据，与父组件无关

作用域：props和data的作用域一样，都只能在子组件本身使用，也可以在子组件内的methods,computed,template中使用

<chlid-comp msg="我是来自父组件的内容"></child-comp>

data{ },
    components:{ 
    	'child-comp':{ 
    		props:['msg'],
    		template:'<div>{ {msg}}</div>'
    	}
    }
    //网页上会显示出 我是来自父组件的内容

3、也可以使用v-bind进行数据的动态绑定

需求：把input中的msg传递到子组件中
    <input type="text" v-model="msg">
    <bind-comp v-bind:childMsg="msg"></bind-comp>

data:{ 
    	msg:'我是v-model绑定的数据'
    },
    components:{ 
    	'bind-comp':{ 
    		props:['childMsg'],
    		template:'<div>{ {childMsg}}</div>'
    	}
    }
    //你在input框中输入什么，下面就会显示什么

![在这里插入图片描述][20190607231740528.png]

## 4、单向数据流 ##

概念：通过props传递数据的操作是单向传递，只能通过父组件传递到子组件中，无法通过子组件传递到父组件

目的：这样设定的目的是为了避免子组件无意中修改了父组件中的数据

应用场景：经常会遇到两种需要改变 props 的情况

#### 4.1 父组件传递数据到子组件，子组件将该数据作为初始值保存，在自己的作用域下进行修改和使用 ####

这时候可以现在子组件data内声明一个数据，引用父组件的props

步骤1：注册组件  
步骤2：将父组件的数据传递进来，并在子组件中用props引用  
步骤3：将传递的数据通过初始值保存起来，后面只要维护这个初始值就好了

<app-tag msg="我是父组件传入的数据"></app-tag>

data:{ },
    components:{ 
    	'app-tag':{ 
    		props:['msg],
    		template:'<div>{ {words}}</div>'
    		data:function(){ 
    			return { 
    				words: this.msg
    			}
    		}
    	}
    }
    //需要注意的是这里的retun内是 words : this.msg 而不是 =

#### 4.2、props作为需要被转变的原始值传入，这种情况用计算属性就可以了 ####

步骤1：注册组件  
步骤2：将父组件的数据传递进来，并用props接收  
步骤3：将传递的数据通过计算属性重新进行计算

需求：随着input输入框的值改变红色方块的长度
    <input type="text" v-model="widthMethods">
    
    <width-tag v-bind:num="widthMethods"></width-tag>

data:{ 
    	widthMethods:100
    },
    components:{ 
    	'width-tag':{ 
    		props:['num'],
    		template:'<div v-bind:style="styleMethods"></div>',
    		computed:{ 
    			styleMethods:function(){ 
    				return { 
    					width: this.num + 'px',
    					background: darkred,
    					height: '50px'
    				}
    			}
    		}
    	}
    }

## 5、数据验证及命名规则 ##

#### 命名规则： ####

1、在html中, myMessage 和 mymessage 是一致的,因此在组件中的html中使用必须使用kebabcase（短横线）命名方式。在html中不允许使用驼峰！

2、在组件中, 父组件给子组件传递数据必须用短横线。在template中，必须使用驼峰命名方式，若为短横线的命名方式。则会直接保错。

3、在组件的data中,用this.XXX引用时,只能是驼峰命名方式。若为短横线的命名方式，则会报错。

总结：
        1、html里面要用短横线<br>
        <my-component></my-component>
    
        2、父组件给子组件传递的数据必须用短横线<br>
        <input type="text" msg-component="我是父组件的内容">
    
        3、组件里面的data用驼峰<br><br>
       data:function(){
            return {
                 this.msgText
            }
        }

#### 数据验证 ####

验证的 type 类型可以是，emmmm，这个没啥好讲的  
• String  
• Number  
• Boolean  
• Object  
• Array  
• Function

## 组件通信 ##

组件关系：vue中有父子组件通信、兄弟组件通信、跨级组件通信这三种

用法：  
1、使用v-on，v-on除了监听DOM事件外，还可用于组件之间的自定义时间  
2、子组件用 emit 来触发事件，父组件用on来监听事件

步骤1：先自定义一个时间  
步骤2：在子组件中用emit触发事件，第一个参数是事件名，后面的参数是要传递的数据  
步骤3：在自定义事件中用一个参数来接收这个数据

需求：通过加号按钮和减号按钮来给父组件传递数据
    
    银行卡余额：{
       {total}}
    
    <btn-comp v-on:change="handleTotal"></btn-comp>

data:{ 
    	total: 1000
    },
    methods:{ 
    	//这里的参数 value 就是 this.$emit() 传递过来的数据
    	handleTotal:function(value){ 
    		//直接赋值就可以
    		this.total = value
    	}
    },
    components{ 
    	'btn-comp':{ 
    		template:'<div>\ <button v-on:click="increase">+1000</button>\ <button v-on:click="reduce">-1000</button>\ </div>\ ',
    		data:function(){ 
    			return { 
    				//在子组件内定义一个count，对count进行操作，然后把count赋值给total
    				count: 1000
    			}
    		},
    		methods:{ 
    			increase:function(){ 
    				this.count = this.count + 1000
    				//写好触发事件$emit()，第一个参数是事件名，第二个是参数，可以有多个
    				this.$emit('change',this.count)
    			},
    			reduce:function(){ 
    				this.count = this.count - 1000
    				this.$emit('change',this.count)
    			}
    		}
    	}
    }

[20190607231740528.png]: /images/20220121/e1259428ab4c440a8c5bfe88af4803e3.png