【Vue】Vue-cli中组件之间的嵌套

一、组件之间的嵌套（普通）

1、效果图

2、MyFather.vue

<template>
  <div>
    <MySon></MySon>
  </div>
</template>

<script>

import MySon from "@/components/FatherSon/MySon.vue"

export default {
  name: "MyFather",
  components: {
    MySon,
  },
};
</script>

<style scoped>
div {
  margin-top: 10px;
  width: 410px;
  height: 200px;
  background-color: rgb(221, 248, 239);
  border: 1px rgb(208, 208, 208) solid;
}
</style>

3、MySon.vue

<template>
  <div>我是被嵌套的【子组件】</div>
</template>

<script>

export default {
  name: "MySon",
};
</script>

<style scoped>

div{
  background-color: beige;
  height: 30px;
  width: 230px;
}

</style>

4、App.vue

<template>
  <div>

    <MyFather>
    </MyFather>
    
  </div>
</template>

<script>
// 引入组件
import MyFather from "@/components/FatherSon/MyFather.vue"

// 注册组件
export default {
  name: "App",
  components: {
    MyFather,
    
  },
};
</script>