【Vue】—处理边界情况

雨点打透心脏的1/2处 2022-09-11 12:29 136阅读 0赞

## 【Vue】—处理边界情况 ##

## 一、边界处理—$ref ##

vue是数据驱动的 很少直接操作dom元素，但是有的时候的确需要操作dom 这是vue中提供ref来获取dom

<div ref='myref'></div>
    <Son ref='myson'></Son>
    通过 this.$refs.myref来获取

## 二、获取根实例—$root ##

$root：获取new Vue()的实例

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

## 三、获取父级组件实例—$parent ##

$parent： 获取父级组件实例 由自己组件来调用

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 3]

# 四、依赖注入 #

父级元素提供数据，子级或后代元素能够直接获取到数据的方法

Parent.vue
      { 
          provide:{ }
          provide:function(){ 
              return { }
          }
      }
    
    
    
      Son.vue
    
      { 
          inject:['count']
      }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/730d38d3932f40579f669ef8ea706f7e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/c09572684bae4143bb7b0724ed15f8c6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/31263337a3e643b98cb8fa6e4c54d198.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/3c77efb69a954034a13ee12a55db4c99.png