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

刺骨的言语ヽ痛彻心扉 2022-03-14 17:14 224阅读 0赞

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

# 组件的生命周期 #

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

# 组件的通信 #

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]  
  最终结果：  
![在这里插入图片描述][20190308143431636.png]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]  
  最终结果：  
  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]

##  3.兄弟组件通信 ##

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

<body>
        <div id="app">
            
            <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>

最终结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220311/d6e26a02abd24bd6bf93523ef2f11ad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20220311/051bdb80ddce4523bb83fa78e7a8c4a9.png
[20190308143431636.png]: /images/20220311/24b6236a6b074040a9d0856699d25773.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]: /images/20220311/8e60c0f511b542cc8d786cfa13b1695b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]: /images/20220311/d5657129b37046ad98c19719fe9adc75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]: /images/20220311/7ba4f6fad4164ef5b6f184ef1fc5d110.png