4.vue组件通信

p{颜色：#42b983;}1.父组件将值传递给子组件。父组件与子组件通信的步骤：1.父组件调用子组件时绑定动态属性。2.在子组件中，通过props接收父组件传过来的数据。//两种方式props:['title']props:{'title':String}父组件与子组件通信的形式：父组件将值传递给子组件。父组件将方法传递给子组件。父组件将整个实例传递给子组件。注意：不要复制父子组件中的属性/方法。重复时，将使用父组件的属性/方法。props是单向绑定的：当父组件的属性发生变化时，它将传播到子组件，而不是相反。示例：Home.vue（父组件）p{颜色：#42b983;}Info.vue(subcomponent)道具验证组件可以指定道具的验证要求。为了自定义props的验证，您可以为props中的值提供一个具有验证要求的对象，而不是一个字符串数组。示例：Vue.component('my-component',{props:{//基本类型检查（`null`和`undefined`将通过任何类型验证）propA:Number,//多种可能的类型propB:[String,Number],//需要字符串propC:{type:String,required:true},//numberwithdefaultvaluepropD:{type:Number,default:100},//withdefaultvalueobjectpropE:{type:Object,//对象或数组默认值必须从工厂函数中获取匹配以下字符串之一return['success','warning','danger'].indexOf(value)!==-1}}}})当prop验证失败时，Vue（开发版本）将生成一个控制台警告。type可以是下面的原生构造函数：StringNumberBooleanArrayObjectDateFunctionSymboltype也可以是自定义构造函数，使用instanceof来检测。2.父子组件主动通信。父组件主动获取子组件的数据和方法：1、调用子组件时，定义一个ref2、父组件传入this。$refs.header.propertythis.$refs.header.Method说明：在任何组件中，都可以通过设置ref方法来获取标签的DOM节点。子组件主动获取父组件的数据和方法：this.$parent.Datathis.$parent.Method示例：Home.vueInfo.vue非父子组件使用\$on(eventName)监听事件，使用\$emit(eventName)触发事件1.新建一个js文件，然后导入vue，实例化vue，最后从“vue”公开这个实例VueEvent.jsimportVue；constVueEvent=newVue();导出默认VueEvent；2.在要播放的文件中引入刚才定义的实例。在方法中：{}，通过VueEmit.$emit('name','data')广播。3、在接收接收数据的文件mounted(){}中通过VueEmit.$on('name',function(){})接收广播数据。Home.vueNews.vue