vue中$emit跟$on,$off跟用法

首先新建一个js文件转为两个vue文件的桥梁

bus.js文件

注意: 子组件的跟父子间都要引入这个文件（文件中写了注释）

import Vue from "vue"
export default new Vue()

childrenSmoll文件（用了element-ui）子组件（$on）

<template><div><el-dialogtitle="提示":visible.sync="isHtmlShow"width="30%"><span>这是一段信息</span><span>dasdsadsadsadsajdlsajdsapodjpoas</span></el-dialog></div>
</template><script>import Bus from "./bus.js";export default {name: "childrenSmoll",data(){return {isHtmlShow:false}},created() {//mediateFile 这个值与父组件的bus.$emit(第一个参数相同)Bus.$on("mediateFile",(e)=>{this.isHtmlShow = e // 这里采用页面一加载的时候触发得到传过来的值})/* 很多人以为为什么我父组件引入这个子组件没有这个值, 并且引用所有子组件的生命周期不是早就已经走完了吗?是不是就会报错？答案不会第一点 Dom元素是已经隐藏的第二点 bus.js文件导出的是new Vue() 看清楚是new Vue()*/   }}
</script>
<style scoped>
</style>

childerEmit.vue文件（用了element-ui）父组件（$emit）

<template><div><!--当点击的时候就会传替参数true 过去子组件就会显示 --><el-button @click="btnClick">点击传替信息</el-button> <childrenSmoll></childrenSmoll></div>
</template>
<script>//这两个文件一定要引入import Bus from "./bus";import childrenSmoll from "./childrenSmoll"; export default {name: "childerEmit",methods:{btnClick(){Bus.$emit("mediateFile",true) // 使用$emit自定义事件把数据带过去},},components:{childrenSmoll}}
</script>
<style scoped>
</style>

$off意思就是移除绑定元素
childerEmit.vue文件加上一个按钮

<el-button @click="btnRemove">移除事件</el-button>
btnRemove{Bus.$off(['mediateFile']) // 移除刚刚定义的mediateFile,同时$off可以为多个参数
}

vue中$emit跟$on,$off跟用法相关推荐

ts 在vue中的使用总结
依旧是只有标题,好像只有这样才能慢慢补坑 / ** ************************** 终于来补坑了 *************************** ** / 变量 ...
面试题目之：说出至少4种vue当中的指令和它的用法？
说出至少4种vue当中的指令和它的用法? (1){{}} .v-html 和v-text ==> 非表单元素 {{}}:以{{data的属性名}}的方式直接使用在标签之间例如: {{name} ...
vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信一.父组件传值给子组件父组件 ...
在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别 1.联动性:storge对于属性的改变不能触发其他页面的改动 storage: 存取login之后就不会改变的信息,比如userId, isAdmi ...
Vue中$emit的用法
对于$emit的用法可以总结: 子组件通过$emit的方式,调用父组件中的事件,进行传递数据 $emit函数只能在子组件中使用一.子组件 <div><!-- 1 给子组件绑定一个 ...
vue中emit的用法
vue中子传父参数的方法共有两种: 1.子组件通过emit传输 2.通过自定义组件传输下列优先讲解下其emit的传输方法在父组件中 (1)首先需要定义其改变的函数,一般emit多用于点击事件,例如 ...
TS在vue中的应用
TIP typescript 配合 Vue3 composition-api 使用 TypeScript 与组合式 API | Vue.js script 加上 lang="ts" ...
antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
vue keep-alive保存路由状态2 (高级用法,接上篇)
接上篇 https://www.cnblogs.com/wangmaoling/p/9803960.html 本文很长,请耐心看完分析. 4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我 ...

vue中$emit跟$on,$off跟用法

vue中$emit跟$on,$off跟用法相关推荐

最新文章

热门文章