我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

前端-陈旭辉-20230621

[复制链接]
陌殇 发表于 2023-6-25 18:36:11 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、学习内容

1、vue组件
组件(component) 是 Vue.js 最强大的功能之一。
Vue 中的组件化开发就是把网页的重复代码抽取出来 ,封装成一个个可复用的视图组件,然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活,可以极大的提高我们开发和维护的效率。
2、vue组件构成
组件就是对局部视图的封装,每个组件包含了
  • HTML 结构
  • CSS 样式
  • JavaScript 行为
            data 数据
            methods 行为
    Vue 中的组件思想借鉴于 React
    目前主流的前端框架:Angular、React 、Vue 都是组件化开发思想

为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。
有两种组件的注册类型:全局注册和局部注册
3、组件命名
可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式
但 DOM 中只能使用横线分隔方式进行引用组件
建议使用驼峰方式,适用性更强,DOM中使用组件时要转换成短横线方式。
4、父子组件
在一个组件中又定义了其它组件就是父子组件
其实局部组件就是最简单的父子组件, 因为我们说过可以把Vue实例看做是一个大组件
我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件
4.1、如何定义其他父子组件
前面我们说过, 自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components
所以我们也可以在自定义组件中再定义其它组件
4.2、父子组件数据传递
在Vue中子组件是不能访问父组件的数据的,
如果子组件想要访问父组件的数据, 必须通过父组件传递
如何传递数据
  • 在父组件中通过v-bind传递数据
    ==传递格式 v-bind:自定义接收名称 = "要传递数据的变量名"==
  • 在子组件中通过props接收数据
    ==接收格式 props: ['自定义接收名称1','自定义接收名称2']==


props注意点:props 只用于组件向子组件传递数据(单向)。
只有在props中声明的变量子组件才能使用。



回复

使用道具 举报

关注0

粉丝0

帖子57

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026