【Vue-Next】Composition API 实践日志 01

记录一下截止目前使用 vue-next composition api 的一些实践以及对比 Vue 2.x 的一些 API 变化

Provide

Vue 2.x

可以直接提供祖辈上下文 this 依赖，后代注入后可以使用上下文中所有内容。

provide() {
  return {
    'parent': this
  };
}

Vue-Next

由于 setup 函数没有 this 上下文, 所以 provide 的内容你需要按需传入，传什么后代才能用什么。

provide('parent', { props, context, someMethods, someComputeds ... })

$parent

Vue 2.x

$parnet 父实例，如果当前实例有的话。

// Clild
this.$parent.$el

Vue-Next

已经移除了这个 $parent，需要使用 provide / inject 去实现。

自定义组件 v-model

如果封装一个 input 组件，我们需要在内部定义一个 value 和实现 @input 事件，使用 this.$emit('input', val); 去通知父组件改变 v-model。

在 Vue-Next 中变为 emit('update:modelValue', val)

Vue 2.x

this.$emit('input', event.target.value);

Vue-Next

props: {
  modelValue: {}
}

emit('update:modelValue', val)

$on / $off / $once

在 Vue 2.x 中可以使用 $on / $off / $once 做一些事件的监听和移除，而在 Vue-Next 中以上三个方法已经移除，需要借助第三方库实现。

参考: Mitt