ref、插槽、 跨域、计算属性和监听属性

1. ref

• 获取DOM元素和组件
• 使用：在元素或者组件中声明ref 调⽤ this.$refs
• 获取子组件的数据和方法

2. 插槽

2.1 作用

提供给⽗组件的⼀个占位符，在⼦组件声明slot标签

2.2 默认插槽

在子组件中

 <slot> </slot>

在⽗组件的⼦标签中

<template> 代码 </template>

2.3 具名插槽

在子组件中

 <slot name=""></slot>

在⽗组件的⼦标签中

<!-- 方法1 -->
<template v-slot:名字> 代码 </template>
<!-- 方法2 -->
<template #名字> 代码 </template>

2.4 作用域插槽

在子组件中

 <slot name="" ⾃定义的属性="传递的参数"></slot>

在⽗组件的⼦标签中

<!-- 方法1 -->
<template v-slot:名字="scope"> {{scope}}代码 </template>
<!-- 方法2 -->
<template #名字="scope">{{scope}} 代码</template>

3. 跨域

3.1 同源策略

浏览器的⼀种安全协议，只要协议 主机 端⼝号有⼀个不⼀致就会产⽣同源策略，从⽽引发跨域问题。

3.2 解决跨域

• 后台直接放开 不安全
• 利⽤script标签中的src属性不受同源策略的影响，需要后端配合。
• 配置代理

4. computed 计算属性

computed和data平级， 不能与data⾥⾯的数据重复

computed:{ 
  //方法1
  计算的属性(){ },
  //方法2
  计算的属性:{ 
     get(){},
     set(val 计算属性的值 ){}
     } 
 } 

5. watch 监听属性

watch:{ 
   //方法1
   监听的属性(newVal,oldVal){} ,
   //方法2
   监听的属性:{
     handler(newVal,oldVal){},
     immediate:true  //⽴即监听,
     deep:true  //深度监听
   }
}

6. 监听属性和计算属性的区别

• 计算属性：结果会被缓存，除⾮依赖的响应式属性变化才会重新计算
• 监听属性：监听的属性发⽣改变的时候触发响应的监听回调