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.

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

原文链接:juejin.im

上一篇:我的js算法爬坑之旅-有序数组的平方
下一篇:跨平台文件在线预览解决方案(四)-Android和IOS原生插件

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    1 个月前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🚩Vue源码——如何监听数据变化

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue 是用数据来驱动来生成视图...

    10 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    6 个月前
  • 🏆 掘金技术征文|双节特别篇 vue3——composition API

    vue3刚出测试版的时候尝过一次,后来学了react,才尝出点味道来,现在再尝一遍,先从重要的compositon api入手! composition api 主要是把之前vue的核心api暴露出来...

    18 天前
  • 🎉🎉🎉 一个基于vue3+vite+ts的完整项目

    VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 ...

    15 天前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    2 个月前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    1 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前

官方社区

扫码加入 JavaScript 社区