vue-------形成父子组件及常见问题

一、父子组件关系

父子关系更多是指使用关系
因为在单文件组件中不能通过components来创建结构上的子组件
意味着在项目中，所谓父组件和子组件都是单独的单文件组件，它们更多是的引入使用关系

二、形成父子组件三步骤

1.在father组件中引入son组件
2.注册son组件
3.使用son组件

父组件代码

.<template>
  <div class="father">
    <h1>我是父组件</h1>
    <!-- 3.使用 -->
    <son1></son1>
  </div>
</template>

<script>
//1.引入组件
import son1 from "./son1";
export default {
  //2.注册
  components: {
    son1,
  },
};
</script>

.<style lang="less" scoped>
.father {
  //添加样式区分
  width: 100%;
  background-color: cadetblue;
}
</style>

子组件代码

.<template>
  <div class="son">
    <h1>我是子组件</h1>
  </div>
</template>

<script>
export default {};
</script>
.<style lang="less" scoped>
.son {
  //添加样式区分
  width: 80%;
  background-color: cornflowerblue;
}
</style>

效果

三、常见报错问题

Unknown custom element: <son1> - did you register the component correctly? For 
recursive components, make sure to provide the "name" option.

意思是指定的组件没有正确的注册，或者组件的名称使用错误