（二）Vue2 Composition API

1. context 里都有啥

  setup (props, context) {
    console.log(context, 'context')
  },

 1. props、emit 用法

父组件：

<template>
  <div>
    <Child
      :name="name"
      @changeName="changeName"
    />
  </div>
</template>

<script>
import { defineComponent, ref } from '@vue/composition-api'
import Child from './child.vue'
export default defineComponent({
  components: {
    Child
  },
  setup () {
   let name = ref('zfb')
    const changeName = () => {
      name.value = 'lyf'
    }
    return {
      name,
      changeName
    }
  },
})
</script>

<style scoped>

</style>

子组件：

<template>
  <div>
    {{name.value}}
    <div @click="changeName">emit 回调</div>
  </div>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
  // 先接收
  props: ['name'],
  // context 中解构 emit
  setup(props, {emit}) {
    // 赋值
    let name = ref(props.name)
    const changeName = () => {
      emit('changeName')
    }
    return {
      name,
      changeName
    }
  },
})
</script>

2. 生命周期

在 Composition API  中，生命周期要写在 setup 函数中，接受一个函数作为参数

<script>
import {
    defineComponent,
    onBeforeMount,
    onMounted,
    onUpdated,
    onBeforeUpdate,
    onBeforeUnmount,
    onUnmounted
} from '@vue/composition-api'

export default defineComponent({
  setup() {
    onBeforeMount(() => {
      console.log('onBeforeMount ---')
    }),
    onMounted(() => {
      console.log('onMounted ---')
    }),
    onUpdated(() => {
      console.log('onUpdated ---')
    }),
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate ---')
    }),
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount ---')
    }),
    onUnmounted(() => {
      console.log('onUnmounted ---')
    })
  },
})
</script>

新增了几个生命周期，但是不常用