【前端】Vue组件的生命周期及其通信

最新推荐文章于 2024-09-24 08:43:56 发布

不开花的玫瑰

最新推荐文章于 2024-09-24 08:43:56 发布

阅读量610

点赞数 1

分类专栏： ♏ 个人成长文章标签：前端 Vue 组件

本文链接：https://blog.csdn.net/m0_37508531/article/details/88351767

版权

♏ 个人成长专栏收录该内容

44 篇文章 2 订阅

订阅专栏

Vue中可以通过组件的方式来完成代码的管理编写，从而提升代码质量。组件是一个可以被反复使用的，带有指定的功能视图。

组件的生命周期

组件的生命周期分为四个阶段：create，mount，update，destroy。

前	后	解释	执行次数
beforeCreate	created	创建：初始化操作	1
beforeMount	mounted	挂载DOM树	1
beforeUpdate	updated	数据更新，操作或逻辑判断	n
beforeDestroy	destroyed	清理工作	1

在这里插入图片描述

组件的通信

1.父组件发送数据到子组件

1）父组件调用子组件（传值）
2）子组件中获取父组件传来的值

在这里插入图片描述
最终结果：

2.子组件传递数据到父组件

1）在父组件中先定义一个方法，用于接收子组件通过事件发送来的数据
2）在父组件模板：绑定事件处理函数
3）在子组件中触发事件，并且传递数据

在这里插入图片描述
最终结果：

3.兄弟组件通信

借助于一个公共Vue实例对象，不同的组件可以通过该对象完成事件绑定和触发

<body>
    <div id="app">
        <!-- 4.挂载兄弟组件 必须组件“烤串”，避免大小写混合-->
        <xiong-da></xiong-da>
        <xiong-er></xiong-er>
    </div>
    
    <script src="vue.js"></script>
    
    <script>
        // 1.创建公共 Vue对象
        var bus=new Vue();
        
        // 3.创建组件 xiong-er
        Vue.component("xiong-er",{
            template:`
                <div>
                    <h4>熊二接收数据</h4>
                    <button @click="sendData">熊二后发送消息</button>
                </div>
            `,
            mounted:function(){
                bus.$on("customeEvent",function(msg){
                    console.log("熊大发来的消息：" + msg);
                })
            },
            methods:{
                sendData:function(){
                    bus.$emit("customeEvent2","熊大，等等我");      //触发
                }
            }
        })
        
        // 2.创建组件 xiong-da
        Vue.component("xiong-da",{
            template:`
                <div>
                    <h4>熊大发数据</h4>
                    <button @click="setData">发送</button>
                </div>
            `,
            methods:{
                setData:function(){
                    // 发送事件
                    bus.$emit("customeEvent","光头强又来偷木头了")      
                }
            },
            mounted:function(){
                // 绑定事件
                bus.$on("customeEvent2",function(msg){     
                    console.log("熊二发来的消息："+msg);
                })
            }
        })
        // 4.创建Vue
        new Vue({el:"#app"});
    </script>
</body>

最终结果：
在这里插入图片描述