vue组件化之父子通信、注册组件

以你之姓@ 2023-02-18 14:07 24阅读 0赞

## 1、我在[hbuildx][]新建项目，vue的基本模板 ##

巴拉巴拉等待中。。。。

下载下来的目录结构如下：  
![vue基本结构][vue]

## 2、开始书写组件：src目录下的components目录下写.vue文件：father.vue，child.vue(默认的HellowWorld.vue可以使用，也可以不用) ##

child.vue的代码如下：

<template>
    	<div id="child">
    		<div class="blog-post">
    			<h3>{ {  post.title }}</h3>
    			<button @click="tabs">
    				Enlarge text{ { count}}
    			</button>
    			<button :disabled="post.disabled" @click="count+=3">count进步3</button>
    			<div v-html="post.content"></div>
    			<div v-for="(item,index) in post.arr" :key="index">{ { item.name}}</div>
    			<div>{ { size}}</div>
    			<slot></slot>//插槽，可以在父组件自定义内容
    		</div>
    	</div>
    </template>
    
    <script>
    	export default { 
    		name: 'child',
    		props: { 
    			post: { 
    				type: Object,
    				default: function() { 
    					return { }
    				}
    			},
    			/* count:{//count定义在这里会报错 type:Number, default:1 } */
    		},
    		data: function() { 
    			return { 
    				count: 1,
    				size:'ABC'
    			}
    		},
    		computed: { 
    			normalSize: function() { 
    				return this.size.trim().toLowerCase();
    			}
    		},
    		methods: { 
    			tabs: function() { 
    				this.count++;
    				this.size = this.getUpperCharacter();
    				this.$emit('clicknow', [this.count, this.normalSize])
    			},
    			getCharacter: function(flag) { 
    				var character = [];
    				if (flag === "lower") { 
    					character = String.fromCharCode(Math.floor(Math.random() * 26) + "a".charCodeAt(0));
    				}
    				if (flag === "upper") { 
    					for(var i = 0; i<3;i++){ 
    						character.push(String.fromCharCode(Math.floor(Math.random() * 26) + "A".charCodeAt(0)));
    					}
    				}
    				return character.toString().replace(/,/g,'');
    			},
    			getUpperCharacter: function() { 
    				return this.getCharacter("upper");
    			},
    			getLowerCharacter: function() { 
    				return this.getCharacter("lower");
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

father.vue的代码如下：

<template>
    	<div id="hello">
    		<Child v-for="post in posts" v-bind:key="post.id" v-bind:post="post" @clicknow="tabb">
    			{ { coun}}
    		</Child>
    	</div>
    </template>
    
    <script>
    	import Child from './Child.vue'
    
    	export default { 
    		name: 'hello',
    		components: { 
    			Child
    		},
    		data: function() { 
    			return { 
    				posts: [{ 
    					id: 1,
    					content: '你好',
    					title: '标题',
    					disabled: true,
    					arr:[{ 
    						name:'love'
    					}]
    				}],
    				coun: 1,
    			}
    		},
    		mounted() { 
    			
    		},
    		methods: { 
    			tabb: function(e) { 
    				this.coun = e[0];
    				console.log(e[1])
    			},
    			
    		}
    	}
    </script>
    
    <style>
    
    </style>

App.vue的代码如下：

<template>
    	<div id="app">
    		<Father></Father>
    	</div>
    </template>
    
    <script>
    	import Father from './components/Father.vue'
    	export default { 
    		name: 'app',
    		components: { 
    			Father
    		},
    		methods: { 
    			
    		}
    	}
    </script>
    
    <style>
    
    </style>

## 3、 如何在father中使用child.vue？ ##

![在父组件中使用子组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]

## 4、如何将father和child渲染出来呢？ ##

1.  在father.vue中使用child，需要引入child组件：引入方式为`import Child from ./child.vue`,使用方式见以上代码
2.  需要在app.vue引入father.vue

本节重点：

> 1、子组件使用prop或者data函数定义变量  
> 2、**单向下行绑定**：使用prop定义的变量不可以再子组件中做运算，即不可在子组件中改变变量的值，否则控制台会发出警告；同时注意一下：**prop定义的数组或者对象是可以改变父组件的值的**，因为—》在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。  
> 3、父组件改变变量的状态和值会直接影响子组件，反之，控制台会发出警告。

## 全局的方式注册组件 ##

如下：

> 1、 优点：全局注册的组件在工程项目中任意地方都可以使用：即–》全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。  
> 2、 缺点：开发人员在打包时会把不必要甚至没有使用过的组件会一直在构建的项目中，即–》如果你使用一个像 webpack这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的JavaScript 的无谓的增加

## 局部的方式注册： ##

本次项目例子就是局部注册的。哪里要使用，先引入才可以。

var ComponentA = {  /* ... */ }
    var ComponentB = {  /* ... */ }
    var ComponentC = {  /* ... */ }
    new Vue({ 
      el: '#app',
      components: { 
        'component-a': ComponentA,
        'component-b': ComponentB
      }
    })

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

注意**局部注册的组件在其子组件中不可用**。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = {  /* ... */ }
    
    var ComponentB = { 
      components: { 
        'component-a': ComponentA
      },
      // ...
    }

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'
    
    export default { 
      components: { 
        ComponentA
      },
      // ...
    }

ComponentA是ComponentA:ComponentA的缩写

1.  用在模板中的**自定义元素的名称**
2.  包含了这个**组件选项的变量名**

/* 全局注册 */
    			Vue.component('Counter',{ 
    				data(){ return{ count:10}},
    				template:`<div>{ {count}}</div>`
    			})
    			/* 局部注册 */
    			var Coun = { 
    				data(){ return{ coun:20}},
    				template:`<div>{ {coun}}</div>`
    			}
    			var vm =new Vue({ 
    				el:'#app',
    				data:function(){ 
    					return{ 
    						
    					}
    				},
    				components:{ 
    					Coun//局部注册的
    				}
    			
    			})

--------------------

更多推荐  
[vue基础][vue 1]

[hbuildx]: https://www.dcloud.io/hbuilderx.html
[vue]: https://img-blog.csdnimg.cn/20200618151204523.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200618151609877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70#pic_center
[vue 1]: https://blog.csdn.net/ligang2585116/article/details/78253195?locationNum=3&fps=1