vue学习笔记 四、定义组件(组件基本结构)

系列导航

vue学习笔记 一、环境搭建

vue学习笔记 二、环境搭建+项目创建

vue学习笔记 三、文件和目录结构

vue学习笔记 四、定义组件(组件基本结构)

vue学习笔记 五、创建子组件实例

vue学习笔记 六、ref定义单个数据

vue学习笔记 七、方法的定义和使用

vue学习笔记 八、toRef的使用

vue学习笔记 九、父子组件实例-基本结构

vue学习笔记 十、状态管理基础结构

vue学习笔记 十一、计算属性介绍

vue学习笔记 十二、通过计算属性获取定义的状态数据

vue学习笔记 十三、路由介绍

vue学习笔记 十四、页面跳转

vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转

vue学习笔记 十六、params方式带参数的页面跳转

vue学习笔记 十七、父子组件 ---> 子组件传值

vue学习笔记 十八、父子组件相互传递参数

vue学习笔记 十九、实例完整代码

   

组件:组件是维护单一功能,可复用的单个个体。

如上Home.vue内容如下:

如下就是一个组建的基本结构

<template>
    //编写html内容 
</template>

<script>
  //编写js内容 
import {defineComponent} from 'vue'
export default defineComponent({
    //组件名称
    name:'Home',
    //接收父组件的数据
    props:{
         
    },
    setup(props,ctx){

        return{
             
        }
    }
     
})
    
</script>

<style scoped lang="scss">
    //编写样式  scoped 只在当前组件生效 
     
</style>

 

posted @ 2021-09-30 12:30  万笑佛  阅读(254)  评论(0编辑  收藏  举报