1.Angular

我们一般会将Angular组件分别定义在.html/.css/.ts文件中

@Component({
  imports: [profile-photo-part-component],
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto { }

2.Vue

我们一般会将 Vue 组件定义在一个单独的 .vue 文件中（包含html,css,js/ts）

<template>
    这里写HTML
</template>

<script>
import properties from '@/utils/Properties';

export default {
  data() {
    return {
      forceRefresh: true,
    };
  },
  components: {
    WordComment,
  },
  methods: {
    onSearch() {
    
    },
  },
};
</script>

<style scoped>
.main {
  margin-left: 200px;
  padding-left: 20;
  background: red;
}
</style>

3.React

React有函数式组件和类式组件两种定义方式，类式组件虽然仍然被 React 支持，但官方不建议在新代码中使用它们。

3.1.函数式组件

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

3.2.类式组件

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}