一、父子组件关系
父子关系更多是指使用关系 因为在单文件组件中不能通过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.
意思是指定的组件没有正确的注册,或者组件的名称使用错误