网页设计与制作课程思政案例集优化网站的方法
我们先在vue项目的src跟目录下创建一个文件夹 叫 utils
下面创建一个js文件夹 叫 bus.js
参考代码如下
import Vue from "vue";
export default new Vue();
然后 我们就可以来用了
在需要定义事件的组件中编写
<template><div><h1>Hello world!</h1></div>
</template><script>
import Bus from '@/utils/bus';
export default {mounted() {Bus.$on('csonldom',(dom)=>{console.log("全局事件输出",dom);})},methods: {}
}
</script>
然后 在需要使用这个方法的组件中调用
<template><div><button @click = "startScanner">触发全局事件</button></div>
</template><script>
import Bus from '@/utils/bus';export default {data() {return {}},methods: {startScanner() {Bus.$emit('csonldom', "小猫猫");}}
}
</script>
需要注意的是
首先 你要
Bus. o n ( ′ 方法 名 ′ , ( d o m ) = > / / 方法体 ) 这个要定义了你用 B u s . on('方法名',(dom)=>{ //方法体 }) 这个要定义了 你用 Bus. on(′方法名′,(dom)=>//方法体)这个要定义了你用Bus.emit(‘方法名’, 方法参数);
才能调用
如果声明的语句还没有执行 你直接通过Bus调用是肯定拿不到的