最重要的是Vue2最常用的11种组件间通信方式props$emit/v-on组件间数据传递的几种方法。syncv-modelref（获取子组件的属性并调用子组件的方法）的本质是获取子组件的this$children/$parent（获取子组件的数组（不包括子组件）component)/获取父组件的this)$attrs/$listeners($attrs子组件获取父组件传递的属性，$listeners子组件获取父组件自定义的方法(此自定义方法由子组件通过$emit))provide/injectEventBusVuex$root(获取为根组件，newVue中定义的方法和属性)Slot发布订阅(pubsub-js)本地存储(localstorage和sessionstorage)props父组件传输数据到子组件，这应该是子组件接收数据最常见的方式了，之后不能直接修改父组件的数据。否则会报错，因为父组件重新渲染时数据会被覆盖。如果只想在子组件中修改，建议使用computed//Parent.vue发送//Child.vue到receiveexportdefault{//写法一使用数组接收props:['msg'],//写法二使用对象接收，可以限制接收数据的类型，设置默认值，验证等.props:{msg:{type:String,default:'这是默认数据'}},mounted(){console.log(this.msg)},}.sync子组件可以修改父组件的内容成分。Sync可以帮助我们实现父组件传递给子组件的数据的双向绑定，这样子组件接收到数据后就可以直接修改，而父组件的数据会在同时//Parent.vuev-model类似于.sync，可以实现父组件传递给子组件的数据为双向绑定，子组件通过$emit修改父组件的数据//Parent.vuerefref如果是在普通DOM元素上，引用指向DOM元素；如果在子组件上，则参考点是子组件实例；父组件可以通过ref主动获取子组件的属性或者调用子组件的方法//Child.vueexportdefault{data(){return{name:"oldCode"}},methods:{someMethod(msg){console.log(msg)}}}//Parent.vue$emit/v-on子组件派发事件通过向父组件发送数据的方法，或者触发更新父组件等操作//Child.vuedispatchexportdefault{data(){return{msg:"Thisisthemessagesenttotheparentcomponent"}},methods:{handleClick(){this.$emit("sendMsg",this.msg)}},}//Parent.vue响应//或简写exportdefault{methods:{getChildMsg(msg){console.log(msg)//这是父组件收到的消息}}}$attrs/$listenersmulti-layer嵌套组件传递数据时，如果只是传递数据，不经过中间处理，就可以使用这个。例如，当父组件向孙组件传递数据时，$attrs：包含父范围内除class和style之外的非props属性的集合，使用this.$attrs获取父范围内所有符合条件的属性集合，以及然后继续将它们传递给子组件内部的其他组件，可以通过v-bind="$attrs"$listeners:include在父作用域中。本机以外的监听事件的集合。如果想继续传递给子组件内部的其他组件，可以用同样的方式使用v-on="$linteners"//Parent.vue//继续传给孙子组件exportdefault{props:["name"],//这里可以接收或不接收mount(){//如果props接收name，则为{title:1111}，否则为{name:"oldCode",title:1111}console.log(this.$attrs)}}$children/$parent$children：获取包含所有子组件（不包括孙组件）的VueComponent对象数组),可以直接获取子组件中的所有数据和方法$parent:获取一个父节点的VueComponent对象，其中也包含父节点中的所有数据和方法//Parent.vueexportdefault{mounted(){this.$children[0].someMethod()//调用第一个ch的方法ildcomponentthis.$children[0].name//获取第一个子组件中的属性}}//Child.vueexportdefault{mounted(){this.$parent.someMethod()//调用父组件的方法componentthis.$parent.name//获取父组件中的属性}}provide/injectprovide/inject是依赖注入，常用在一些插件或者组件库中provide：允许我们指定要提供给后代组件的数据或方法inject：在任何后代组件中接收我们要添加到该组件的数据或方法，无论组件嵌套多深，都可以直接使用.注意最重要的是provide和inject传过来的数据是非响应式的，也就是说inject接收到数据后，provide中的数据发生变化，后代组件中的数据不会发生变化，除非输入是可听对象。所以建议传递一些常量或者方法//父组件exportdefault{//方法一无法获取方法中的方法provide:{name:"oldCode",age:attributesinthis.data},//方法二无法获取provide()中的数据属性{return{name:"oldCode",someMethod:this.someMethod//methodsinmethods}},methods:{someMethod(){console.log("Thisistheinjectedmethod")}}}//后代组件exportdefault{inject:["name","someMethod"],//或inject:{foo:{from:'bar',default:'foo'}},mounted(){console.log(this.name)this.someMethod()}}EventBusEventBus是中枢事件总线，无论是父子组件、兄弟组件、跨级组件等，都可以通过它来完成通信操作。定义的三种方式//方法一//提取到一个单独的js文件Bus.js，然后在需要的地方导入//Bus.jsimportVuefrom"vue"exportdefaultnewVue()//方法二直接挂载到theglobal//main.jsimportVuefrom"vue"Vue.prototype.$bus=newVue()//方法3被注入到Vue根对象//main.jsimportVuefrom"vue"newVue({el:“＃应用程序",data:{Bus:newVue()}})用法如下，以方法一按需引入为例//在需要对外发送自定义事件的组件中ButtonimportBusfrom"./Bus.js"exportdefault{methods:{handlerClick(){//自定义事件名称sendMsgBus.$emit("sendMsg","ThisistosendtoExternalsentdata")}}}//importBusfrom"./Bus.js"exportdefault{mounted(){//监听事件触发Bus.$on("sendMsg",data=>{console.log("Thisisthereceiveddata:",data)})},beforeDestroy(){//unlistenBus.$off("sendMsg")}}大型项目中使用Vuex常用的Vuex是状态管理器，集中存储管理所有组件的状态创建一个包含以下内容的新index.js文件'./state'从'./modules/user'Vue.use(Vuex)conststore=newVuex.Store({modules:{user},getters,actions,mutations,state})导出默认存储然后在main.jsimportimportVuefrom"vue"importstorefrom"./store"newVue({el:"#app",store,render:h=>h(App)})然后导入{inrequiredcomponentsmapGetters,mapMutations}from"vuex"exportdefault{computed:{//方法一然后使用this.propertyname...mapGetters(["在getters.js中引入属性1","属性2"])//Method2...mapGetters("user",[Attribute1inthe"usermodule","Attribute2"])},methods:{//方法一然后用这个。属性名...mapMutations(["在mutations.js中引入方法1","方法2"])//方法2...mapMutations("user",["在用户模块中引入方法1","方法2"])}}//或者你可以这样得到this.$store.state.xxxthis.$store.state.user.xxxslot槽是将子组件的数据通过槽传给父组件，然后再插回去//Child.vue
exportdefault{data(){return{user:{name:"oldCode"}}}}//Parent.vue{{slotProps.user.name}}
发布订阅pubsub-js（也是react使用的）使用subpub插件实现消息订阅=时间监听方法：importPubSubfrom'pubsub-js'mounted(){/*订阅方法，消息名，匿名函数msg=消息名（不能省略），index是你需要传递的参数*/PubSub.subscribe('delData',(msg,index)=>{this.renwu.splice(index,1)});},接收组件importPubSubfrom'pubsub-js'/消息发布，触发逻辑在消息订阅/PubSub.publish('delData',这个.index);
