VUE3-setup的两个注意点（6）

在VUE3中，此案例的Demo.vue组件命名是不规范的，运行时会报错，此时需要关闭语法检查才能继续运行。组件名必须为多个单词

App.vue

<template>
  <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">

    <template v-slot:qwe>
      <h3>测试数据1</h3>
    </template>

    <template v-slot:asd>
      <h3>测试数据2</h3>
    </template>

  </Demo>
</template>

<script>
import Demo from './components/Demo'

export default {
     
     
  name: 'App',
  components: {
     
     
    Demo
  },
  setup() {
     
     
    function showHelloMsg(value, ...other) {
     
     
      console.log('App收到了数据：', value, ...other)
    }

    return {
     
     
      showHelloMsg
    }
  }
}
</script>

Demo.vue

<template>
  <slot name="qwe">默认内容1</slot>
  <slot name="asd">默认内容2</slot>
  <button @click="test">测试触发一下Demo组件的hello事件</button>
</template>

<script>
export default {
     
     
  name: 'Demo',
  props: ['msg', 'school'],
  emits: ['hello'],

  setup(props, context) {
     
     

    console.log('props：', props)
    console.log('context：', context)
    console.log('context.attrs：', context.attrs) // 相当与Vue2中的$attrs
    console.log('context.emit：', context.emit) // 触发自定义事件的
    console.log('context.slots：', context.slots) // 插槽

    // 方法
    function test() {
     
     
      context.emit('hello', 123, 456, 789)
    }

    return {
     
     
      test
    }
  }
}
</script>

结果：