vue总结03--组件化

组件化

组件是可复用的 Vue 实例，带有一个名字，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把 这个组件作为自定义元素来使用。

---

文章目录

• 组件化
• 组件基础
• 组件化理解
• 总结

---

组件基础

一、组件注册、使用及数据传递

Vue.component(name, options)可用于注册组件。

	自定义组件
	<hello-world :msg="msg"></hello-world>
	<script>  
	  // 注册hello-world组件    							   
	  Vue.component('hello-world', {      
	    data() {      
	          return {  
	             message: '888888'     
	         } 
        },       
        props: {  
        	// 接受父组件的数据
           msg: {    
              type: String,
              default: "7777777"
           }, 
       },        
       template: `     
           <div> 哈哈哈哈 </div>  `,
    })
    const app = new Vue({       
       el: '#app',      
       data: {
          title: 'hello world'  
       }    
    }) </script>

二、自定义事件及其监听

当子组件需要和父级组件进行通信，可以派发并监听自定义事件。

<hello-world @add-msg="addMsg"></hello-world>
<script>        
	// 组件注册        
	Vue.component('hello-world', {    
	   data() { 
	       return { 
	           msg: '' 
           }
       },
       template: `
  			// 在组件上使用v-model 组件实现v-model 范例：改造hello-world为支持v-model
           <div>
                 <input v-model="msg"  @keydown.enter="addMsg"/>                         
           </div>
       `, 
        methods: {               
         addMsg() {
               // 发送自定义事件通知父组件                    	
              // 注意事件名称定义时不要有大写字母出现                    		
              this.$emit('add-msg', this.msg)                    
             }            
         }
     }) 

---

三、在组件上使用v-model

自定义组件支持v-model需要实现内部input的:value和@input

	<hello-world v-model="msg" @add-msg="addMsg"></hello-world>
	 Vue.component('hello-world', {            
	// 接收父组件传递value，不需要额外维护msg            
		props: ['value'],       
		template: `                
			<div>                   
			 // 需要实现input的:value和@input                     		
			 <input :value="value" @input="onInput"                         				
			 @keydown.enter="addMsg"/>                    
		`,
		methods: {                
			addMsg() {
			    	// 派发事件不再需要传递数据                    		
			    	this.$emit('add-msg');
			}, 
			onInput(e) { 
			        this.$emit('input', e.target.value);
            }            
       }       
  })            

四、通过插槽分发内容

通过使用vue提供的 元素可以给组件传递内容

<message :show.sync="show">发送消息成功！</message>
Vue.component('message', {        
	props: ['show'],        
	template: `            
		<div class="message-box" v-if="show">
		   // slot作为占位符
		   <slot></slot>                
		   <span class="message-box-close"                     			
		   @click="$emit('update:show', false)">X</span>
        </div>        
    `    
})
	// 如果存在多个独立内容要分发，可以使用具名插槽v-slot:name
	<message :show.sync="show">    
		<template v-slot:title>恭喜</template>    
		<template>新增消息成功！</template>           
	</message>
	Vue.component('message', {    
		props: ['show'],    
		template: `        
			<div class="message-box" v-if="show">            
				<strong><slot name="title"></slot></strong>                            		
				<slot></slot>        
			</div>    
		` })

组件化理解

定义：组件是可复用的 Vue 实例，准确讲它们是VueComponent的实例，继承自Vue。
优点：组件化可以增加代码的复用性、可维护性和可测试性。
使用场景：什么时候使用组件？以下分类可作为参考：
通用组件：实现最基本的功能，具有通用性、复用性，例如按钮组件、输入框组件、布局组件等一系列组件。
业务组件：它们完成具体业务，具有一定的复用性，例如登录组件、轮播图组件。 页面组件：组织应用各部分独立内容，需要时在不同页面组件间切换，例如列表页、详情页组件
如何使用组件
定义：Vue.component()，components选项
分类：有状态组件，functional，abstract
通信：props， e m i t ( ) / emit()/ emit()/on()，provide/inject，
c h i l d r e n / children/ children/parent/ r o o t / root/ root/attrs/$listeners
内容分发：slot，template，v-slot 使用及优化：is，keep-alive，异步组件

总结

vue中的组件经历如下过程 组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM
所以组件的本质是产生虚拟DOM