Vue 事件触发和监听

最新推荐文章于 2024-08-07 09:03:59 发布

不爱撸代码的佛系gril

最新推荐文章于 2024-08-07 09:03:59 发布

阅读量1.1k

点赞数

分类专栏： vue事件文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_47026347/article/details/113657647

版权

vue事件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue 事件触发和监听

一、事件触发（$emit）
在需要触发的页面添加触发事件
父组件

this.$root.eventHub.$emit('事件名', 参数);

<script>
	 changePageMenu(pageMenu, e){
	 //事件触发也需要一个事件来触发，比如此处是切换标签页时触发
                	this.$root.eventHub.$emit('changePageMenu1', pageMenu);
           	 },
</script>

二、事件监听（$on）
在子组件中添加监听事件

this.$root.eventHub.$on('事件名', (callback)=>{}）

子组件

<script>
 	import PageMenu from "@/components/PageMenu";
    import 	First from "./View/First";
    import Second from "./View/Second";
    import Third from "./View/ Third";
    import Fourth from "./View/Fourth";
    export default {
        name: "Demosub",
        data() {
            return {
                FirstVisible:true, //默认初始显示第一页面
                SecondVisible: false,
                ThirdVisible: false,
               	FourthVisible: false,
            }
        },
        components: {
           	First,
            Second,
            Third,
            Fourth,
            PageMenu,
        },
   }
</script>

        mounted() {
            this.$root.eventHub.$on('changePageMenu1', (yourData)=>{
                if(yourData == "第一页面")
                {
                    this.FirstVisible = true;
                    this.SecondVisible = false;
                    this.ThirdVisible = false;
                    this.FourthVisible = false;
                }
                else if(yourData == "第二页面")
                {
                     this.FirstVisible = false;
                    this.SecondVisible = true;
                    this.ThirdVisible = false;
                    this.FourthVisible = false;
                } else if(yourData == "第三页面")
                {
                     this.FirstVisible = false;
                    this.SecondVisible = false;
                    this.ThirdVisible = true;
                    this.FourthVisible = false;
                } else if(yourData == "第四页面")
                {
                     this.FirstVisible = false;
                    this.SecondVisible = false;
                    this.ThirdVisible = false;
                    this.FourthVisible = true;
                }
            } )
        }

自己初学，仅供参考。