首页 > 其他分享 >vue入门篇之Vue.js 组件

vue入门篇之Vue.js 组件

时间:2023-03-15 18:03:46浏览次数:47  
标签:vue 自定义 prop 入门篇 Vue 注册 props 组件

Vue.js 组件是该框架最强大的功能之一,能够扩展 HTML 元素并封装可重用的代码。

通过组件系统,我们可以使用独立可复用的小组件来构建大型应用,几乎任何类型的应用的界面都可以抽象为一个组件树。

全局组件能够被所有实例使用,注册全局组件的语法格式为:Vue.component(tagName, options),其中 tagName 是组件名,options 是配置选项。注册后,我们可以使用来调用组件。

局部组件只能在某个实例中使用,可以在实例选项中注册局部组件。注册局部组件的语法格式为:components: {'kxdang': Child},其中 'kxdang' 是组件名,Child 是组件定义。注册后,在实例的模板中可以使用来调用组件。

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 prop。

使用 v-bind 动态绑定 props 的值到父组件的数据中,每当父组件的数据变化时,该变化也会传导给子组件。

为了定制 prop 的验证方式,组件可以为 props 指定验证要求,可以指定 prop 的类型、是否必填、默认值等信息,并可以自定义验证函数。当 prop 验证失败时,Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器:String、Number、Boolean、Array、Object、Date、Function、Symbol。type 也可以是一个自定义构造器,使用 instanceof 检测。

标签:vue,自定义,prop,入门篇,Vue,注册,props,组件
From: https://blog.51cto.com/u_15848821/6123184

相关文章

  • vuex的应用
    需求:系统顶部添加项目下拉框,顶部下拉框选项改变时其他模块下拉框同时改变。1.开始进入系统的时候获取项目列表页面调用接口//获取项目列表store.dispatch("getProj......
  • 初始Vue
    Vue简介介绍与描述Vue是一套用来动态构建用户界面的渐进式JavaScript框架-构建用户界面:把数据通过某种办法变成用户界面-渐进式:Vue可以自底向上逐层地应用,简单应用只......
  • vue3+vite+vant文件上传
    1:文件上传下载1//上传文件2constafterRead=()=>{3for(letfileoffileList.value){4//1:加载状......
  • MVVM模式和第一个Vue程序
    Vue:MVVM模式和第一个Vue程序什么是MVVM​ MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silv......
  • VUE基础:组件CSS样式、props属性
    VUE基础部分组件css样式例子<stylelang="less">//这里记得改名,然后给div也加名字.comName-container{padding:1020px20px;background-color:lightskyblue......
  • 前端常考vue面试题(必备)
    computed的实现原理computed本质是一个惰性求值的观察者。computed内部实现了一个惰性的watcher,也就是computedwatcher,computedwatcher不会立刻求值,同时持有......
  • vue源码分析-挂载流程和模板编译
    前面几节我们从newVue创建实例开始,介绍了创建实例时执行初始化流程中的重要两步,配置选项的资源合并,以及响应式系统的核心思想,数据代理。在合并章节,我们对Vue丰富的选项......
  • 校招前端vue面试题(边面边更)
    Vue模版编译原理知道吗,能简单说一下吗?简单说,Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段:生成AST树优化codegen首先解析模版,生成AST语法树(......
  • 总结vue的13种传值方法
    1,父子传值,自定义属性传递参数,子组件使用props接收数据2,子传父,父组件提供自定义事件,子组件通过$emit触发事件进行传值3,v-mode传递属性4,.sync传值,提供一个具体的属性,提供......
  • vue3仿windows弹窗
     一款基于vue3的仿windows弹窗。可以组件模板编写或函数式创建。地址:https://github.com/dnoyeb/box-win   安装npmadd'box-win'两种方式:1、组......