组件的组成和组件的嵌套关系

组件的组成

首先建一个.vue文件，在里面写一个内容：

<template>
<div>
  <div class="container">{{ message }}</div>
</div>
</template>
<script>
export default{
  data(){
    return{
      message:"组件基础组成"
    }
  }
}
</script>
<!-- scoped:让当前样式只在当前组件中生效 -->
<style scoped>
.container{
  font-size:30px;
  color:red;
}
</style>

之后在APP.vue中引入组件：

<template>
<!-- 3.显示组件 -->
 <div>
  <MyComponent/>
  <p>zjaiwi</p>
 </div>
</template>
<script>
// 1.引入组件
import MyComponent from './components/MyComponent.vue';
export default{
  // 2.注入组件
  components:{
    MyComponent
  }
}
</script>
<style>

</style>

组件的嵌套关系

理解就是可以写多个.vue文件各个文件都可以随意嵌套组成，最重要的是组件的引入方式。