函数式组件思想与简单例子说明

最新推荐文章于 2024-08-27 16:36:29 发布

奔跑的飞牛

最新推荐文章于 2024-08-27 16:36:29 发布

阅读量688

点赞数

分类专栏： Vue.js 前端学习笔记文章标签： vue 函数式组件高阶组件

本文链接：https://blog.csdn.net/qq_32842925/article/details/89244156

版权

本文探讨了Vue的单文件组件，强调了在大型项目中使用单文件组件的普及性。重点讲解了函数式组件的声明、数据传递，并通过一个递归渲染导航菜单的例子展示了其优势。在函数式组件中，数据传递不依赖data和this，而是通过上下文进行。文章还提及了函数式组件在Vue devtools中不可见的特点，并提供了实际案例来说明如何根据数据动态生成导航菜单。

摘要由CSDN通过智能技术生成

单文件组件

简单来说，单文件组件就是组件的行为、数据、结构等等统一放在一个文件里由Vue的构建系统识别并渲染的*.vue文件；
随着vue cli 的更新迭代，任然使用new Vue的方式建立全局组件并在各个页面选择容器进行投放显然已经落伍了，单文件组件开发在大型项目中已经非常的普遍！请看下图：(这是官方文档里给出的单文件组件示例图)

在这里插入图片描述

或者说这样的结构

<template>
  <div>
    <h1>demo</h1>
    <h1> {
  {name}} </h1>
    <demoComp/>
  </div>
</template>
<script>
import demoComp from './view/democomp'
export default {
    
  name:'sub-menu',
  components:{
    demoComp},
  props: ['menuInfo'],
  data:{
    
    return:{
    
      name:'haha'
    }
  },
  methods:{
    
    hello(){
    
      console.log('hello')
    }
  },
  created(){
    
  }
}
</script