_vue3中的setup()方法，父传子，子传父

起步

setup是vue3中新的组件选项，是整个组合API的起点。

几乎所有的代码都可以在setup()中编写，最后通过return交出一个对象

从组件的生命周期来看，setup函数在beforeCreate之前执行，这意味着在setup中我们是拿不到this的，这时候的this是一个underfined

---

setup中的参数

setup中有两个参数

1.props          

组件外部传递过来的数据，如果没有在props配置中声明，相当于this.$attrs

2.context      

  执行上下文，context中有三个是我们需要了解并使用到的

 1.atters

        如果组件外部传递过来的数据，我们没有使用props接收的话，就会被atters接收到

  2.emit

        相当于vue2中的$emit，但在vue3中父组件传递的自定义事件，我们需要在子组件中的

        emits中接收，

        我们通过事件名.emit(' 触发事件的名字 ' ，参数)可以触发父组件绑定的事件并传参，

        

        3.slots

                收到的插槽内容，相当于this.$slots

//父组件
<template>

  <HoMe :uname="data.uname"
        @updataUname="updataUname">
    <template #qwe>
      123
    </template>
  </HoMe>
</template>

<script>
import { reactive } from '@vue/reactivity';
import HoMe from './components/home.vue'
export default {
  components: {
    HoMe
  },
  name: 'App',
  setup () {
    let data = reactive({
      uname: '张三'
    })

    function updataUname (val) {
      data.uname = val
    }


    return {
      data,
      updataUname
    }
  }

}
</script>

<style scoped>
.box1,
.box2 {
  border: 1px solid #000;
}
</style>


//子组件
<template>
  123
  {{uname}}
  <button @click="updataUnameFn">改变uname</button>
  <slot name="qwe"></slot>
</template>

<script>
export default {
  props: ['uname'],
  emits: ['updataUname'],
  setup (props, context) {
    console.log(props, context);

    function updataUnameFn () {
      console.log(context);
      context.emit('updataUname', '西装暴徒章三')
    }
    return {
      updataUnameFn
    }
  }

}
</script>

<style>
</style>