1.组合式api

把同样功能的方法和变量定义写在一起

<script setup>
</script>

方法 变量不需要导出 引用组件可以直接使用

export default defineComponent({
  props: {
    propData: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    component
  },
  setup(props, context) {
    const store = useStore()
    
    return {
      store
    }
  }
})

方法，变量需要导出使用，

2.reactive和ref

reactive声明引用数据类型
ref声明基本数据类型，取值需要.value
toRefs 用于对象解构
isRef 用于检测是否是个ref对象

  const reactive = reactive({
      aa,
      bb,
      cc
  })
  console.log(reactive)
  
  cosnt ref = ref(1)

3.computed 计算属性和watch

// 计算属性
 const computed = computed(() => {
  return {
    kaa:true
  }
})

//计算属性传参
{{computed('123')}}
const computed = computed(() => {
  return obj => {
    if (obj === 'a') return 'a'
    return obj
  }
})


watch(val, (newVal) => {
 console.log(newval)
}, {
  immediate: true, // 第一次是否监听
  deep: true // 当val是个数组的时候，是否深度监听
})

4.父子组件之间传值

v-mode:value

v-mode:value 等于:value + emit('update:value')

defineProps 用于子组件接受父组件传值

const props = defineProps({
  type: {
    type: Number,
    default: () => 1, // 默认值
    required:true,  // 定义是否必填
    validator:Function //自定义校验函数
  }
})

const { type } = toRefs(props)

defineExpose父组件调用子组件的方法

父组件
<tab ref="refGet"/>
const refGet = ref(null)
refGet.value.validate()

子组件
function validate(){
    return true
}
defineExpose({
  validate
})

defineEmits 父组件接受子组件传值

子组件
const emit = defineEmits(['update:keyword'], ['updateData'])
emit('update:keyword', msg)
emit('updateData', msg)

父组件接受
<div   v-model:keyword="searchInput"  @updateData="searchChange"></div>

祖孙组件传值

祖组件
provide('name', number)

孙组件
const a= inject('name')

5.插槽

具名插槽

子组件
 <slot :text="text"  name="slotname" ></slot>

父组件
 <template #slotname="{text}">
    {{text}}
 </template>

6.teleport的使用

teleport的任何内容都将渲染在目标元素中

<teleport  to="body">

</teleport>