Vue组件使用基础
这篇博文用来记录
.vue
组件的使用方法。
可以把组件代码按照 template
、style
、script
的拆分方式,放置到对应的 .vue
文件中。
模板(
template
)、初始数据(data
)、接受的外部参数(props
)、方法(methods
)、生命周期钩子函数(lifecycle hooks
)。
基本步骤
在 html
中使用组件
<div id="app">
<my-component></my-component>
</div>
使用组件首先需要创建构造器:
var myComponent = Vue.extend({
template: `<p>myComponent</p>`
})
要把这个构造器用作组件,需要用 Vue.component(tag, constructor)
注册 :
全局注册
// 全局注册组件,tag 为 my-component
Vue.component('my-component', myComponent)
Vue.component('my-component', MyComponent)
这种是全局注册,第一个参数是注册组件的名称,第二个参数是组件的构造函数;
选项对象的template
属性用于定义组件要渲染的HTML
;
局部注册
new Vue({
el: '#app',
components: {
'my-component': myComponent
}
})
子组件只能在父组件的template
中使用。
组件选项问题
在定义组件的选项时,data
和 el
选项必须使用函数。
如果data
选项指向某个对象,这意味着所有的组件实例共用一个data
。
所以应当使用一个函数作为 data
选项,让这个函数返回一个新对象:
Vue.component('my-component', {
data: function () {
return {a: 1}
}
});
同理,el
选项用在 Vue.extend()
中时也须是一个函数。
数据传递
Vue.js组件之间有三种数据传递方式:
- props
- 组件通信
- slot
props
props是组件数据的一个字段,期望从父组件传下来数据。因为组件实例的作用域是孤立的,所以子组件需要显式地用props
选项来获取父组件的数据。
props
选项可以是字面量、表达式、绑定修饰符。
字面量
<div id="app">
<child msg="hello!"></child>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('child', {
props: ['msg'],
// prop 可以用在模板内
// 可以用 this.msg 设置
template: `<span>{{msg}} Are you tired?</span>`
});
new Vue({
el: "#app"
})
</script>
HTML
特性不区分大小写。名字形式为 camelCase
的 prop
用作特性时,需要转为 kebab-case
(短横线隔开):
<div id="app">
<child my-message="hello!"></child>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('child', {
props: ['myMessage'],
template: `<span>{{myMessage}} Are you tired?</span>`
});
new Vue({
el: "#app"
})
</script>
动态
用 v-bind
绑定动态 props
到父组件的数据。每当父组件的数据变化时,也会传导给子组件。
<div id="app">
<input v-model="parentMsg"><br>
<child :my-message="parentMsg"></child>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('child', {
props: ['myMessage'],
template: `<span>{{myMessage}} Are you tired?</span>`
});
new Vue({
el: "#app",
data: {
parentMsg: 'hello!'
}
})
</script>
绑定类型
可以使用绑定修饰符:
.sync
,双向绑定.once
,单次绑定
<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>
prop
默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。
不过需要注意的是:如果 prop
是一个对象或数组,是按引用传递。在子组件内修改它会影响父组件的状态,不管是使用哪种绑定类型。
prop类型验证
Vue.component('example', {
props: {
propA: Number,// 基础类型检测 (`null` 任何类型)
propM: [String, Number],// 多种类型 (1.0.21+)
propB: {// 必需且是字符串
type: String,
required: true
},
propC: {// 数字,有默认值
type: Number,
default: 100
},
propD: {// 对象|数组的默认值应当由一个函数返回
type: Object,
default: function () {
return {msg: 'hello'}
}
},
propE: {
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
twoWay: true
},
propF: {// 自定义验证函数
validator: function (value) {
return value > 10
}
},
propG: {
// 转换函数(1.0.12 新增)
// 在设置值之前转换值
coerce: function (val) {
return val + '';// 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val);// 将 JSON 字符串转换为对象
}
}
}
});
原文地址:https://segmentfault.com/a/1190000012878571
Vue组件使用基础的更多相关文章
- Vue组件的基础用法(火柴)
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
- Vue 组件的基础介绍
1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue.js-08:第八章 - 组件的基础知识
一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
- vue.js原生组件化开发(一)——组件开发基础
前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...
- 2.基础:Vue组件的核心概念
一.组件基础和注册 组件概念 组件系统是 Vue 的另一个重要概念,他的核心就是封装和复用. 细节 组件的name必须是全局唯一. 二.属性.事件和插槽 组件的三大核心概念:属性.事件和插槽. 属性, ...
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
随机推荐
- 树莓派(Raspberry Pi):完美的家用服务器
出处:http://linux.cn/thread/11884/1/1/ 树莓派(Raspberry Pi):完美的家用服务器 自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和 ...
- java实现多个数字求和_图形化界面
一,设计思想 1,通过简单的窗口实现多个数字的输入与输出. 2,可通过用户输入数字的数量来实现多个数字的求和. 3,定义整型数组变量number和字符串型数组变量integer,将输入的字符串变量赋给 ...
- 《一个民企CEO的职场阳谋》–读书总结(上)
职场是一个战场,很多人几十年在这里战斗. 职场是一个熔炉,很多人大半生在这里修炼. 如果在办公室里得不到快乐,生活就不会快乐. 如果公司里头感觉不到幸福,人生就不会幸福.(以上四句来自老刘的博客) & ...
- 前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...
- linux部分常用命令
linux的命令挺多的,下面是我常用的,其实也不可能在敲代码的时候把这个博客拿出来对着写,就是想记录一下,刚开始都觉得不好记,多敲几遍就记住了!!! 创建文件夹:mkdir filename 删除当前 ...
- IDEA使用快捷键
sout+TAB键---->System.out.println();你可以按ctrl+j里面各种快捷键模板都可以看到. Intellij Idea get/set方法快捷键:Alt+Inse ...
- 监控aps.net计数器
- C#-WebService基础02
WebService WSDL是web service的交换格式 跨平台数据交互 什么是web服务 SOA 面向服务的体系结构 service-Oriented Architecture Servi ...
- ZOJ 3687
赤裸的带禁区的排列数,不过,难点在于如何用程序来写这个公式了.纠结了好久没想到,看了看别人的博客,用了DFS,实在妙极,比自己最初想用枚举的笨方法高明许多啊.\ http://blog.csdn.ne ...
- hadoop系列:zookeeper(2)——zookeeper核心原理(选举)
1.前述 上篇文章<hadoop系列:zookeeper(1)--zookeeper单点和集群安装>(http://blog.csdn.net/yinwenjie/article/deta ...