2.归纳.md 1.8 KB
组件通信
1.父子组件通信 props 2.自定义事件 父子组件通信 第一种 父级组件: 在template标签中 ref="名称"
mounted生命周期 this.$refs.名称.$on(“自定义的方法名”,具体要传的方法)
子级组件：
this.$emit("“自定义的方法名”")
第二种： $on 订阅事件 mounted生命周期 $emit 监听事件 $off 解绑事件 销毁阶段 父级组件:
<子级组件 @自定义的方法名="自定义的方法名"></子级组件>
自定义的方法名(形参) {
使用的方法
}
子级组件：
this.$emit("自定义的方法名",传的方法/参数)
3.全局事件总线（任意组件通信） main.js页面 new Vue({ render: h => h(App), beforeCreate() {
// 全局事件总线
// Object.definePrototype
Vue.prototype.$bus = this;
} }).$mount('#app')
this.$bus.$on("自定义事件名称",方法) 绑定 onMounted this.$bus.$emit("自定义的方法名",传的方法/参数) 监听 如果传入了参数 需跳回到$on所绑定的具体事件上操作 this.$bus.$off() 解绑 beforeDestroy
4.消息的发布与订阅（任意组件通信） npm/cnpm install pubsub-js --save yarn add pubsub-js --save
1.使用页面引入pubsub-js pubsub.subscribe => $on pubsub.publish => $emit 切记：如果传参 那么真实参数在第二位 pubsub.unsubscribe => $off
5.插槽 a.默认插槽 =>详情请见demo6 b.具名插槽 =>详情请见demo7 c.作用域插槽 =>详情请见demo8 案例：具名插槽+作用域插槽 =>详情请见demo9
6.mixin a.在utils文件夹内封装mixin.js文件 b.全局挂载mixin =>main.js
7.打包 npm run build/yarn build 打包出dist文件
8.axios 官网：https://www.axios-http.cn/ 安装：npm/cnpm install axios yarn add axios