单文件组件

文件目录.png

App.vue

<template>
  <!-- 组件的结构 -->
  <div>
    <School> </School>
    <Student> </Student>
  </div>
</template>

<script>
// 引入组件
import School from './School'
import Student from './Student'

export default {
  name: 'App',
  components: {
    School,
    Student,
  },
}
</script>

<style scoped></style>

School.vue

<template>
  <!-- 组件的结构 -->
  <div class="demo">
    <h2>学校名称:{{ schoolName }}</h2>
    <h2>学校地址:{{ address }}</h2>
    <button :click="showSchoolName">点我提示学校名</button>
  </div>
</template>

<script>
// 组件交互相关的代码（数据、方法等等）
// 第一步：创建学校组件
export default {
  name: 'School',
  data() {
    return {
      schoolName: '清华大学',
      address: '北京',
    }
  },
  methods: {
    showSchoolName() {
      alert(this.schoolName)
    },
  },
}
</script>

<style scoped>
/* 组件的样式 */
.demo {
  background-color: orange;
}
</style>

Student.vue

<template>
  <!-- 组件的结构 -->
  <div class="demo">
    <h2>学生姓名:{{ studentName }}</h2>
    <h2>年龄:{{ age }}</h2>
  </div>
</template>

<script>
// 组件交互相关的代码（数据、方法等等）
// 第一步：创建学校组件
export default {
  name: 'Student',
  data() {
    return {
      studentName: '清华大学',
      age: 18,
    }
  },
}
</script>

<style scoped>
/* 组件的样式 */
</style>