这篇博文用来记录 .vue 组件的使用方法。

可以把组件代码按照 templatestylescript 的拆分方式,放置到对应的 .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中使用。

组件选项问题

在定义组件的选项时,datael 选项必须使用函数。

如果data选项指向某个对象,这意味着所有的组件实例共用一个data

所以应当使用一个函数作为 data 选项,让这个函数返回一个新对象:


Vue.component('my-component', {
data: function () {
return {a: 1}
}
});

同理,el 选项用在 Vue.extend() 中时也须是一个函数。

数据传递

Vue.js组件之间有三种数据传递方式:

  1. props
  2. 组件通信
  3. 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 特性不区分大小写。名字形式为 camelCaseprop 用作特性时,需要转为 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组件使用基础的更多相关文章

  1. Vue组件的基础用法(火柴)

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

  2. Vue 组件的基础介绍

    1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html ...

  3. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  4. Vue.js-08:第八章 - 组件的基础知识

    一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...

  5. Vue组件基础

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  6. 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: ...

  7. vue.js原生组件化开发(一)——组件开发基础

    前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...

  8. 2.基础:Vue组件的核心概念

    一.组件基础和注册 组件概念 组件系统是 Vue 的另一个重要概念,他的核心就是封装和复用. 细节 组件的name必须是全局唯一. 二.属性.事件和插槽 组件的三大核心概念:属性.事件和插槽. 属性, ...

  9. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

随机推荐

  1. JVM 原理

    0 引言  JVM一直是java知识里面进阶阶段的重要部分,如果希望在java领域研究的更深入,则JVM则是如论如何也避开不了的话题,本系列试图通过简洁易读的方式,讲解JVM必要的知识点. 1 运行流 ...

  2. 【XSY2989】字符串

    题目来源:NOI2018模拟测试赛(二十六) 题解: 首先由于这是个01串,所以反对称串的意思就是这个字符串的后半部分是前半部分的反转且翻转结果: 一个串出现有三种情况:在前半部分,在后半部分或穿过中 ...

  3. [置顶] openHAB 体系结构与编程模型 (1) --- 术语

    openHAB 术语 Item : 对硬件设备属性的抽象 ( Items are objects that can be read from or written to in order to int ...

  4. CefSharp的简单应用,制作自动学习视频软件(基于Chromium)

    CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”,机翻的意思就是“基于Cefsharp Chromium的浏览器组件” ...

  5. [luogu2579 ZJOI2005] 沼泽鳄鱼(矩阵快速幂)

    传送门 题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石 ...

  6. [luogu2151 SDOI2009] HH去散步 (矩阵快速幂)

    传送门 题目描述 HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又因为HH ...

  7. echarts如何更改表格主题颜色

    vue项目中,需要使用echarts时,需要根据UI设计图进行图标颜色修改 方法一: 1.在script中引入echarts以及主题样式: import echarts from 'echarts'; ...

  8. 洛谷P1004 方格取数

    网络流大法吼 不想用DP的我选择了用网络流-- 建模方法: 从源点向(1,1)连一条容量为2(走两次),费用为0的边 从(n,n)向汇点连一条容量为2,费用为0的边 每个方格向右边和下边的方格连一条容 ...

  9. SpringBoot2.0中使用订阅redis的多个频道的消息

    声明:参考文章:https://blog.csdn.net/myNameIssls/article/details/75471012?locationNum=2&fps=1 一·使用maven ...

  10. linux mint(Ubuntu、Debian) 18修改环境变量

    修改环境变量 sudo gedit /etc/profile sudo gedit /etc/profile 在profile文件的末尾添加以下代码 export JAVA_HOME=/usr/lib ...