vue3.0新特性 组合式API(setup)

组合式API

setup是个函数在props被解析完成后执行，setup(props,content)
1.props是响应式的，所以不能进行es6解构会失去响应式的特性.
note:可以使用toRefs函数完成次操作。

import { toRefs } from 'vue'
setup(props) {
    const { title } = toRefs(props)
    console.log(title.value)
}

2.context主要暴露四个属性

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

主要说下expose:
主要是将子组件的方法暴露出去，父组件通过ref去调用此方法.

//child.vue
  
  
//parent.vue
  
  

多个子组件

//parent.vue