vue3 composition-Api初体验

setup()

1. 这是使用composition-Api的入口;
2. 可以接受两个参数:setup(props, context)
   • props:接受父组件传来的参数;
   • context:(执行上下文)
3. 使用ref声明函数，才是可变的
4. 使用函数必须从setup里return出去

v-mdoel

父组件

• 不使用v-model
  <ele-switch :value="checked" @input="checked = $event" />
• 使用v-model
  <ele-switch v-model:value="checked" />

子组件

• 不使v-model

  setup(props,context) {
    const checked = ref(false)
    const toogleVal = () => {
      checked.value = !checked.value
    }
    return { checked, toogleVal }
  },

• 使用v-model

setup(props, context) {
    const toogleVal = () => {
      context.emit('update:value', !props.value)
    }
    return { toogleVal }
  },

如果使用了v-model，context.emit的第一个参数必须写为<updata:接受props的名>