组件概念及使用

组件是Vue.js中的重要概念,它允许将页面拆分成可复用的块,形成类似树的结构。组件的使用包括声明、注册和使用三个步骤。声明组件时,通过vue.extend定义模板。注册组件分为全局注册和局部注册,前者适用于所有Vue实例,后者仅限于特定实例。组件可以嵌套,父组件注册子组件后,在其template中调用。组件的本质是代码的模块化,将代码块封装,类似于函数封装,使得布局显示的是组件内的代码而非组件本身。
摘要由CSDN通过智能技术生成
  • 组件就是将页面拆分,分成不同的块,块中包含其他的块,可类比树的结构。
  • 组件使用分为三个部分:1.声明组件 2.注册组件 3.使用组件
  • 声明组件:var app = vue.extent({template: })
    注册组件:全局注册:Vue.component( ”标签名“,组件名称);
  • 局部注册:在Vue实例中注册就成为该实例作用范围的局部组件:components: { 标签名:组件名 }
  • 组件的嵌套,在父组件中注册子组件,然后在父组件的template模板中就可以使用子组件
  • 组件只是框架的一种结构,页面根据组件标签寻找相应的组件,然后把组件的代码渲染,打开浏览器查看布局的时候,布局中看到的不是组件,二是组件中的代码。个人理解,组件只是一个把代码拆分成模块的代码组织方式,就像函数封装以后函数是不变的,组件封装代码块。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" conten
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]:微信小程序组件间传值_小山羊~的博客-CSDN博客_小程序组件传值一. 微信小程序父组件向子组件传值1.父组件可以直接传参或者使用数据绑定向子组件动态传递数据组件在父组件内写法:<view> <!-- 以下是对一个自定义组件的引用 --> <my-component inner-text="Some text" numberA='5' numberB='4' prop-a="{{dataFieldA}}"></my-component></view>\[1\] 引用\[2\]:通过传统的getElementById的方法不方便拿到子组件对应的节点,因此在组件的模板中,可以给标签加上一个ref属性ref="引用名",然后通过this.$refs.引用名就可以拿到这个DOM节点。这个方法对于普通标签同样适用。\[2\] 引用\[3\]:prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多人却忽视,直接使用 props 的数组用法,这样的组件往往是不严谨的。\[3\] 问题:uniapp组件传值概念 回答: 在uniapp中,组件传值的概念与微信小程序类似。父组件可以通过直接传参或者使用数据绑定的方式向子组件动态传递数据。在父组件内,可以通过引用子组件的方式来传递参数,例如<my-component inner-text="Some text" numberA='5' numberB='4' prop-a="{{dataFieldA}}"></my-component>\[1\]。同时,为了方便获取子组件对应的节点,可以在组件的模板中给标签加上ref属性,然后通过this.$refs.引用名来获取DOM节点\[2\]。在组件开发中,可以使用props来定义组件的可配置属性,通过对象的写法可以设置类型、默认值或自定义校验属性的值\[3\]。这样可以确保组件的严谨性和灵活性。 #### 引用[.reference_title] - *1* [uniapp微信小程序传参方法和注意事项](https://blog.csdn.net/qq_22182989/article/details/124827105)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp 子组件 props拿不到数据_【2】浅析Vue组件](https://blog.csdn.net/weixin_39527879/article/details/110150127)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp 子组件 props拿不到数据_深入理解Vue组件3大核心概念](https://blog.csdn.net/weixin_39981400/article/details/110081950)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值