vue3中setup的注意点

App.vue

<template>
  <HelloWorld msg="Welcome to Your Vue.js App" school='家里蹲' @hello = 'sayHello'>
    <template v-slot:dew> 
      <span>你可太秀了</span>
    </template>
  </HelloWorld>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    function sayHello(val) {
      alert('你好啊'+val)
    }
    return{
      sayHello
    }
  }
}
</script>

Helloword.vue

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
    <h2>{{ school }}</h2>
    <slot></slot>
    <button @click="alterHello">点我</button>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  emits: ["hello"],
  props: ["msg", "school"],
  setup(props, context) {
    console.log(props,6) 
    //props:Proxy {msg: "Welcome to Your Vue.js App", school: "家里蹲"} 6
    console.log(context.attrs,7)
    //若props中没接收school,那school就会存在attrs里
    console.log(context.slots,8)
    // 父组件传过来的插槽会存在slots里
    console.log(context.emits,9)
    // 想要调用父组件的方法，先用emits接收，然后用context.emit调用
    function alterHello() {
      context.emit("hello", "大霞");
    }
    return {
      alterHello,
    }
  },
};
</script>