Vue3_组件</template> ``` ```vue  <template> <

组件传参

<!-- App.vue -->
<template>
   <div :style="{'fontSize': size + 'px'}">
    <Test 
        @encharge="changeSize()"    <!-- 接受子组件事件>
        v-for="item in arr" :title="item.title"/>  <！--向子组件传递数据>
   </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import Test from './components/Test.vue'

let arr = reactive([
  {'title':'乾坤大挪移'},
  {'title':'九阴真经'}
])

let size = ref(10)

function changeSize() {
    size.value += 1
    console.log('---', size.value);
}
    
</script>

<!-- Test.vue-->
<template>
    <div>{{props.title}}</div>
    <button @click="$emit('encharge')">变大</button>
</template>

<script setup>
const props = defineProps(['title'])  <!--定义接受的数据 -->
defineEmits(['encharge'])   <!-- 定义弹出的事件 -->

</script>

组件插槽

<!-- App.vue-->
<template>
    <Cacao>
        <span style="color:red">默认填充到默认插槽中</span>
        <template #s1>
            命名插槽
        </template>
        <template #s2="params">
            <ul>
                <li v-for="item in params.data">{{item.title}}</li>
            </ul>
        </template>
    </Cacao>
</template>

<template>
    <slot>111</slot><br>
    <slot name="s1"></slot><br>
    <slot name="s2" :data="news"></slot>
</template>

<script setup>
import { reactive } from 'vue';

const news = reactive([
    {'title':'你好'},
    {'title':'welchome'}
])
</script>