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

山竹回家了

于 2020-10-16 22:50:03 发布

阅读量536

点赞数

分类专栏：前端 vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_47886687/article/details/109126143

版权

前端同时被 2 个专栏收录

122 篇文章

订阅专栏

vue

74 篇文章

订阅专栏

本文详细介绍了Vue.js中父子组件的关系和创建步骤，包括在父组件中引入并注册子组件，然后在模板中使用。同时，针对Unknown custom element: <son1>的常见报错进行了分析，提示需确保组件正确注册。通过实例展示了Vue组件化的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、父子组件关系

父子关系更多是指使用关系
因为在单文件组件中不能通过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.

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