组件组成vue

组件组成_vue_

<!-- App.vue   -->
<template>
  <!-- 第二步： 显示组件 -->
  <!-- <HelloWorld />
  <ifDemo />
  <ListDemo /> -->
  <!-- <eventprocessing />
  <eventprocessing2 />
  <eventprocessing3 /> -->
  <!-- <eventprocessingmodification />
  <arraydetection /> -->
  <!-- <calculation_properties /> -->
  <!-- <classDemo /> -->
  <!-- <ListenerDemo /> -->
   <!-- <template_Reference /> -->
    <component_communication />
</template>




<script setup lang="ts">
// 第一步：引入组件
// import HelloWorld from './components/HelloWorld.vue';
// import ifDemo from './components/ifDemo.vue';
// import ListDemo from './components/ListDemo.vue';
// import eventprocessing from './components/EventProcessingAbab.vue';
// import eventprocessing2 from './components/EventProcessingAbabdemo2.vue';
// import eventprocessing3 from './components/EventProcessingAbabdemo3.vue';
// import eventprocessingmodification from './components/EventModification.vue';
// import arraydetection from './components/arraydetection.vue';
// import calculation_properties from './components/calculation_properties.vue';
// import classDemo from './components/classDemo.vue';
// import ListenerDemo from './components/ListenerDemo.vue';
// import ListenerDemo from './components/FromInputBinding.vue'
// import template_Reference from './components/template_Reference.vue';
import component_communication from './components/Component_composition.vue';
</script>

<template>
<div class="container">{{ message }}</div>
</template>
<script lang="ts" setup>
import { ref} from 'vue';
const message = ref('Hello World');
</script>



<!-- scoped 让 css 只对当前组件生效 -->
<!-- 这里的样式只会作用于当前组件 -->
 <!-- 如果不加scoped，则会全局生效 -->
<style scoped>
.container {
  font-size: 20px;
  color: #ec7676;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
}


</style>