vue3中Api使用变化

一、filter

1.vue3移除了局部过滤器和全局过滤器。

2.但是可以通过全局属性来配置全局属性函数，此方法也可以替代之前的vue原型挂载

app.config.globalProperties

// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}
// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}

二、v-model

1.vue3中，v-model语法糖
（1）默认给子组件定义modelValue的prop
（2）默认给子组件实例绑定@update:modelValue自定义事件
（3）可通过v-model后面加propName参数修改

<child-component v-model='value'></child-component>
// 等价于
<child-component :modelValue='value' @update:modelValue='value = $event'>
</child-component>
// 添加propName参数
<child-component v-model:title='value'></child-component>
// 等价于
<child-component :title='value' @update:title='value = $event'>
</child-component>

三、prop接受

1.从vue中引入，defineProps函数来定义接受props

（1）在template中可以直接使用定义的prop

（2）在script中用prop，需要使用prop对象上获取对应属性

import {defineProps} from 'vue'
defineProps({
  visibel:{
    type:Boolean,
    defualt: false
  }
})

四、emit自定义事件

1.引入defineEmits来声明emits，再出发自定义事件

import {defineEmits} from "vue"
const emit = defineEmits(['update:modelValue'])
emit('update:modelValue')