Vue.js 组件

admin

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

注册一个全局组件语法格式如下：

1. Vue.component(tagName, options)

复制代码

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

1. <tagName></tagName>

复制代码

全局组件

所有实例都能用全局组件。

全局组件实例

注册一个简单的全局组件 runoob，并使用它：

4 L* R7 P* j0 T

1. <div id="app">
   
2.     <runoob></runoob>
   
3. </div>
   / ~8 u1 E; l5 }) v% g  O
4. 
   
5. <script>
   0 |1 q" d# U5 g, ?3 E1 o3 U
6. // 注册
   1 d" X. R7 J: N+ c
7. Vue.component('runoob', {
   9 `  F) C2 }: }; U3 h% W
8.   template: '<h1>自定义组件!</h1>'
   ; N' F' T2 F, g/ h% m0 }
9. })
   
10. // 创建根实例
    
11. new Vue({
    
12.   el: '#app'
    ' e) [3 _' Z& q1 g0 v6 _  M$ E
13. })
    
14. </script>

复制代码

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

局部组件实例

注册一个简单的局部组件 runoob，并使用它：

1. <div id="app">
   
2.     <runoob></runoob>
   " h  ]" v2 K# ^
3. </div>
   
4. 
   
5. <script>
   
6. var Child = {
   
7.   template: '<h1>自定义组件!</h1>'
   ! Y2 ?# M* i8 x! y2 b' @
8. }
   $ s3 P; \" L) i! ]- M5 k+ l5 Q
9. 
   8 f& y0 E; B# c5 L6 a4 u! f: c; c7 m; K% f
10. // 创建根实例
    / \9 N& E0 ^" B8 _% o; ~9 \6 v
11. new Vue({
    
12.   el: '#app',
    8 R! E+ K. e# P; f1 K
13.   components: {
    ' P. p1 e( F0 \
14.     // <runoob> 将只在父模板可用
    
15.     'runoob': Child
    / [+ ~( R( @* I% V) O
16.   }
    
17. })
    
18. </script>

复制代码

Prop

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

Prop 实例

1. <div id="app">
   
2.     <child message="hello!"></child>
   ; ^8 B0 t' {9 `2 h, W3 q1 `  z$ a
3. </div>
   - V9 S3 r6 @7 \2 M. u, @
4. 
   8 ^; Q- T+ V* I9 X' c# |, ^
5. <script>
   2 W. ~1 L! Z( @) ?
6. // 注册
   . w6 `4 Z8 B: `2 ~/ }7 g
7. Vue.component('child', {
   
8.   // 声明 props
   
9.   props: ['message'],
   
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    : t. Z$ Q& J7 ^8 m  R% C2 @+ G5 i
11.   template: '<span>{{ message }}</span>'
    * Q: Z6 p1 L3 Q* k9 v0 V7 Q! `+ w
12. })
      E) r5 _7 y1 A, i& G% G7 H
13. // 创建根实例
    
14. new Vue({
    $ m  ^# ^( u" o0 }: B
15.   el: '#app'
    4 c/ W& G" i- ~: g% s$ n% {: H; \
16. })
    3 w9 L" ?. e$ b& U2 C0 o! E7 V
17. </script>

复制代码

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

Prop 实例

1. <div id="app">
   
2.     <div>
   , n. w) H/ N9 a% e2 {
3.       <input v-model="parentMsg">
   0 f7 b' C2 @2 S7 i; S& w# q. M
4.       <br>
   * m" U: v. a2 h& t! B1 _' n
5.       <child v-bind:message="parentMsg"></child>
   - I& d2 p+ x3 k6 P, N2 a+ j, f% S9 l; J
6.     </div>
   1 f" u0 L% i0 I" V- S
7. </div>
   
8. 
   
9. <script>
   3 S: _+ i4 t' A& c
10. // 注册
    1 E$ ^6 F) S5 \# g" H
11. Vue.component('child', {
    * X3 v  o, Z0 M9 K, r
12.   // 声明 props
    , [' V3 X' u: m& q
13.   props: ['message'],
    / d9 i1 ~5 q7 H1 T" }! O
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    / A4 C" r5 H( w5 |3 L6 ~& b+ C
15.   template: '<span>{{ message }}</span>'
    
16. })
    $ _( a0 C4 Q. Q! T: K
17. // 创建根实例
    - p/ u, L- a3 a" N+ t- g
18. new Vue({
    
19.   el: '#app',
    
20.   data: {
    
21.     parentMsg: '父组件内容'
    6 G3 K* n$ h# w3 o7 ^  D3 z
22.   }
    
23. })
    
24. </script>

复制代码

以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中：

Prop 实例

1. <div id="app">
   & @6 u; f+ K" ^, @  V( ?
2.     <ol>
   0 C/ y6 X+ [3 e& f0 f* E, ]  j
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   
4.       </ol>
   
5. </div>
   
6. 
   
7. <script>
   3 ?6 b* h! ?6 r! k  [5 f
8. Vue.component('todo-item', {
   5 }# n; O# E  k; }
9.   props: ['todo'],
   " u' U1 j  Z: d2 _4 y
10.   template: '<li>{{ todo.text }}</li>'
    
11. })
    
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    
15.     sites: [
    $ v3 N' j5 g' T" d9 U
16.       { text: 'Runoob' },
    8 A6 s) }% y. Q$ T2 }# e
17.       { text: 'Google' },
    
18.       { text: 'Taobao' }
    
19.     ]
    2 C! `( d3 x6 Y6 G  A
20.   }
    
21. })
    
22. </script>

复制代码

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

Prop 验证

组件可以为 props 指定验证要求。

prop 是一个对象而不是字符串数组时，它包含验证要求：

1. Vue.component('example', {
   
2.   props: {
   
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   $ `# I- S4 q8 G9 a! Z) b
4.     propA: Number,
   " ^7 R  Q. c, [& |4 L. `  B6 v6 L
5.     // 多种类型
   8 [6 G" ]* F4 x9 H6 m/ ^
6.     propB: [String, Number],
   / O6 E+ y1 \9 H8 H/ U& U
7.     // 必传且是字符串
   
8.     propC: {
   
9.       type: String,
   
10.       required: true
    
11.     },
    1 `% a& D6 U8 `* H, ~/ ~+ f9 v' O
12.     // 数字，有默认值
    
13.     propD: {
    4 s) d% Z3 W! N$ E- O0 T
14.       type: Number,
    
15.       default: 100
    
16.     },
    
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    & W1 T3 C1 J# j; x
19.       type: Object,
    
20.       default: function () {
    5 X" H% P+ H0 `. y. \9 ?3 j$ _
21.         return { message: 'hello' }
    
22.       }
    " d/ w" C% l7 z: i
23.     },
    
24.     // 自定义验证函数
    
25.     propF: {
    
26.       validator: function (value) {
    5 q7 f0 o4 u; _4 m: V
27.         return value > 10
    % y% Y! v! Z) |' h7 \3 b
28.       }
      d5 G- N, @" d. j2 T9 h. h
29.     }
    
30.   }
    
31. })

复制代码

type 可以是下面原生构造器：

• String
• Number
• Boolean
• Function
• Object
• Array
  / y9 a6 e% j* o/ v: z( W1 u

type 也可以是一个自定义构造器，使用 instanceof 检测。

---

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  + V& G0 t% T/ u: \2 o( ?% d

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

实例

1. <div id="app">
   , `. }# h( q' T" Y% s0 X9 j0 g
2.     <div id="counter-event-example">
   9 |$ X+ [6 o% m
3.       <p>{{ total }}</p>
   9 A1 A9 d9 z- D, j! e
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   : k: P9 t) O6 C
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
6.     </div>
   3 T# e9 N" [2 y8 f- t- _- \, K
7. </div>
   
8. 
   9 ?: i7 p3 S5 @9 F, A7 H5 o8 e/ |
9. <script>
   ( W! `5 ?+ Q( G
10. Vue.component('button-counter', {
    5 o7 G* v- b0 y8 H4 |% k4 d, R2 p. H
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    % r; o& N) ^1 P
12.   data: function () {
    ; }/ L% x% i" i: t
13.     return {
    , R4 x6 g$ n' D; m, x9 \! R
14.       counter: 0
    
15.     }
    
16.   },
    
17.   methods: {
    0 g+ N, y4 ~3 {( `3 p
18.     incrementHandler: function () {
    $ O2 h7 S) ^* h8 p
19.       this.counter += 1
    
20.       this.$emit('increment')
    
21.     }
    - T2 ^' D, g) o4 \* u
22.   },
    9 n( Y# A* e+ u
23. })
    
24. new Vue({
    + z" \' h+ j+ ^' d0 F+ X3 F
25.   el: '#counter-event-example',
    ! y) n* u1 \6 o+ E+ G
26.   data: {
    . y, H/ u" m" O1 d- f; G
27.     total: 0
    
28.   },
    
29.   methods: {
      E* s7 y) I9 G/ F$ ?6 H  \1 F
30.     incrementTotal: function () {
    
31.       this.total += 1
    6 {7 Z- J* F, B, D
32.     }
    1 O0 ]4 @1 O) x7 w
33.   }
    ! a* x; e6 \. c/ ]
34. })
    : l( K  ]) H) z. V4 R) e6 m+ r
35. </script>

复制代码

如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

1. <my-component v-on:click.native="doTheThing"></my-component>

复制代码

父组件给子组件传值的时候，如果想传入一个变量，写法如下：

1. // 注册
   
2. Vue.component('child', {
   
3.   // 声明 props
   
4.   props: ['message'],
   ( u/ H5 _) r0 _3 U
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   8 Z* b( v/ W  |, W# ?6 t2 H4 \; V
6.   template: '<span>{{ message }}</span>'
   
7. })
   
8. // 创建根实例
   
9. new Vue({
   
10.   el: '#app',
    * a# q8 J% }( c! n5 F9 ~
11.   data:{
    
12.     message:"hello",
    
13.   }
    
14. })

复制代码

子组件通过 $emit 触发父组件的方法时，如果需要传递参数，可在方法名后面加参数数组。

比如 $emit("FunctionName") 当要传递参数时 ：$emit("FunctionName",[arg1,arg2...])。

1. methods: {
   
2.     incrementHandler: function (v) {
   9 I7 m9 h- y- D# U7 h6 Y
3.         if(v==1){
   
4.             this.counter -= 1
   6 S: Q+ Z% ?6 x: H3 }$ U: D3 h
5.             this.$emit('increment',[1])
   
6.         }else{
   ; E0 s5 _' _, ]; k* L9 R; x
7.             this.counter += 1
   
8.             this.$emit('increment',[2])
   
9.         }
   
10.     }
    5 l4 I" v7 x6 Q; w4 V+ M, ^: A3 K
11. }

复制代码

, A6 W: a+ g! i0 U$ a3 ]8 M
/ }1 B0 X8 m2 e