vue入门篇之Vue.js 组件

简介: vue入门篇之Vue.js 组件

vue入门篇之Vue.js 组件


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 检测。

目录
相关文章
|
1天前
|
JavaScript
vue 动态绑定方法
vue 动态绑定方法
6 0
|
1天前
|
JavaScript
vue 手动/局部刷新组件
vue 手动/局部刷新组件
5 0
|
1天前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
6 0
|
1天前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
13 4
|
1天前
|
JavaScript
vue 组件封装 | s-scroll 页面滚动动画
vue 组件封装 | s-scroll 页面滚动动画
6 0
|
1天前
|
JavaScript 容器
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
8 0
|
1天前
|
JavaScript
Vue 组件封装 | 给汉字注音(带声调),内含汉字转拼音(带声调/不带声调),获取汉字首字母的方法
Vue 组件封装 | 给汉字注音(带声调),内含汉字转拼音(带声调/不带声调),获取汉字首字母的方法
8 0
|
1天前
|
JavaScript
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
15 7
|
1天前
|
JavaScript
vue 组件封装 | 图片放大镜(同天猫、淘宝、京东等商品图片放大浏览效果)
vue 组件封装 | 图片放大镜(同天猫、淘宝、京东等商品图片放大浏览效果)
11 6