vue3 script-setup defineProps defineEmitvue3 script-setup de

vue3 script-setup defineProps defineEmit

script-setup

只需要在<script>标签中添加setup属性，整个 script 就直接会变成 setup 函数。
所有变量就会自动暴露给模版使用，无须一个一个return

<script setup lang="ts">

</script>

父子组件之间的信息传递

defineProps 是用来定义 props 的，defineEmit 则是用来定义 emits

父组件

      <div class="technology-container">
        <div class="item-container-angular" v-for="item in showData" :key="item.index">
          <div>{{item.value}}</div>
          <div class="angular-item">
            <testSlot :type="item.name" testData='1111111' @emitClick="testClick">
              <template v-slot:a>
                <div>
                  <span>应学</span>
                </div>
                adasdas
              </template>
            </testSlot>

            <div>已学</div>
          </div>
        </div>
      </div>

子组件

import {defineProps, defineProps} from 'vue'
    const props = defineProps({
      type:String,
      testData:String,
    })

    onMounted(()=>{
      console.log('props', props,showData)
    })

    const testClick = () => {
      emit('emitClick')
    }

defineProps和defineEmits的定义

通过defineProps接收父组件传递的信息
通过defineEmits来调用父组件的方法