Vue.js 组件

admin

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

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

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

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

1. Vue.component(tagName, options)

复制代码

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

1. <tagName></tagName>

复制代码

全局组件

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

全局组件实例

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

+ s, n- m( D( ~7 H

1. <div id="app">
   7 w+ H. t8 R) z9 T
2.     <runoob></runoob>
   
3. </div>
   
4. 
   
5. <script>
   
6. // 注册
   ' f9 \% I) ?! F
7. Vue.component('runoob', {
   
8.   template: '<h1>自定义组件!</h1>'
   - z2 D* W- O( i) T/ A- h
9. })
   3 }' T: }5 w8 M! q8 U4 ~
10. // 创建根实例
    
11. new Vue({
    
12.   el: '#app'
    " N1 u( e7 p  c1 t8 @  R
13. })
    $ V* O% [- a+ R0 M7 Q7 d, B
14. </script>

复制代码

局部组件

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

局部组件实例

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

6 ~; Y# R2 R' N/ [7 u9 R6 Y

1. <div id="app">
   * x& j# O5 X7 \. ?. c
2.     <runoob></runoob>
   
3. </div>
   . N3 e1 O2 p0 u
4. 
   
5. <script>
   
6. var Child = {
   
7.   template: '<h1>自定义组件!</h1>'
   
8. }
   7 |8 Z, _! K7 \# }+ m7 u1 @( F) m  V
9. 
   : @: \( j: a/ F, |7 \9 O% n' [( O
10. // 创建根实例
    . u+ L0 [7 @: K
11. new Vue({
    + q5 f% n: {; [+ W: D0 P2 n% N; J. B( n. y
12.   el: '#app',
    
13.   components: {
    % o. z4 d' ?. {8 X' G+ q
14.     // <runoob> 将只在父模板可用
    - F& S& f) d# G3 i* @
15.     'runoob': Child
    3 D. N! o& ^0 |# H- ?
16.   }
    
17. })
    
18. </script>

复制代码

Prop

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

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

Prop 实例

1. <div id="app">
   
2.     <child message="hello!"></child>
   
3. </div>
   6 h) I3 t  E8 T
4. 
   
5. <script>
   
6. // 注册
     w) V- [4 L7 c1 [7 z# h# B# f0 c
7. Vue.component('child', {
   
8.   // 声明 props
   
9.   props: ['message'],
   ( S: Z' D: q; C. Z
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    3 C0 R7 Z: _: e
11.   template: '<span>{{ message }}</span>'
    - w" a7 c* G2 Y2 e7 W( \1 [; a3 z. k
12. })
    
13. // 创建根实例
    
14. new Vue({
    9 ?8 A8 x. p" h( |/ F: L
15.   el: '#app'
    9 E5 }4 O: d/ J& \
16. })
    4 b: z9 K% S7 a! e  W  I
17. </script>

复制代码

动态 Prop

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

Prop 实例
* b, d! w) Q4 x0 _5 s; t

1. <div id="app">
   
2.     <div>
   ( `3 V+ J/ L: P, [- {2 Y, d7 g
3.       <input v-model="parentMsg">
   ! q# s1 e2 l% W' G! k  U
4.       <br>
   * j3 Y; t7 C( j% e
5.       <child v-bind:message="parentMsg"></child>
   - j2 I5 ]9 L+ c; ^3 W! K6 N
6.     </div>
   8 s+ V% D- z. ?- d  V3 O
7. </div>
   
8. 
   
9. <script>
   7 S3 Z0 d2 {' ^  {. x% u
10. // 注册
    
11. Vue.component('child', {
    6 x! [& J2 H6 S' R6 ~
12.   // 声明 props
    
13.   props: ['message'],
    
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    
15.   template: '<span>{{ message }}</span>'
    * i4 \% M5 ^4 B# c& N
16. })
      t3 k3 C% k+ a! G! w2 r' F" G# H* w
17. // 创建根实例
    
18. new Vue({
    
19.   el: '#app',
    # ]: E; b. c: d4 x; C
20.   data: {
    
21.     parentMsg: '父组件内容'
    6 d) P6 Y. {* P$ G
22.   }
    
23. })
    
24. </script>

复制代码

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

Prop 实例
+ R1 B0 p8 @( T0 h4 J

1. <div id="app">
   
2.     <ol>
   
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   7 f6 y3 a  a0 n9 \: |
4.       </ol>
   
5. </div>
   2 i2 L1 J; w' T. T' s  b0 i
6. 
   / c) U3 E: c% Q# P& ~2 W" m4 w
7. <script>
   
8. Vue.component('todo-item', {
   
9.   props: ['todo'],
   
10.   template: '<li>{{ todo.text }}</li>'
    1 A5 u0 z, H& l% q: ~9 g7 c
11. })
    * P8 _# o6 w6 \1 U7 S
12. new Vue({
    5 @6 H5 h! S6 T
13.   el: '#app',
    
14.   data: {
    1 [0 Q' `0 |5 r6 ?, N" e! {
15.     sites: [
    
16.       { text: 'Runoob' },
    & [' g. w2 u$ q* J. l+ @
17.       { text: 'Google' },
    
18.       { text: 'Taobao' }
    
19.     ]
    9 W( C* ]& a! T* Q/ h8 C; Z% E1 L
20.   }
    
21. })
    4 c1 F1 L  j7 f" Y2 q8 e* J
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   
2.   props: {
     i/ }! M: a7 w( [; g" |8 X1 W  K1 V
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   
4.     propA: Number,
   3 n$ T! s! d1 w  `
5.     // 多种类型
   4 W! d. N! L1 q, q
6.     propB: [String, Number],
   : q! o8 y- H1 _* c6 F
7.     // 必传且是字符串
   
8.     propC: {
   # F4 j* T, h4 ^% y/ }0 F6 r1 ]
9.       type: String,
   . C  N1 X0 N- q
10.       required: true
    
11.     },
    4 r5 [" E' G6 K
12.     // 数字，有默认值
    6 A: a8 ?0 d- c; E8 Z
13.     propD: {
    
14.       type: Number,
    , ]7 g( m$ T$ S$ L5 c6 X( b
15.       default: 100
    
16.     },
    
17.     // 数组／对象的默认值应当由一个工厂函数返回
    / Y" Z5 H. F! @  [- o) _' m1 v
18.     propE: {
    . ?! A( E! {. K" ?
19.       type: Object,
    
20.       default: function () {
    9 Q8 i6 v- a  c3 q* y
21.         return { message: 'hello' }
    - G0 r# ^6 F; D0 r5 d6 `& ]
22.       }
    
23.     },
    7 D* b5 D0 r: }0 X/ r
24.     // 自定义验证函数
    7 `1 V6 l8 L! P2 [$ T9 {
25.     propF: {
    " p/ A6 U3 ]& o; m
26.       validator: function (value) {
    $ ~9 y, _# _5 x' D4 j' A3 L
27.         return value > 10
    
28.       }
    
29.     }
    
30.   }
    
31. })

复制代码

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

• String
• Number
• Boolean
• Function
• Object
• Array
  ; h& m9 t: s4 h4 b

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  ' `0 J  l- ?3 ]1 h. \* L/ a; P

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

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

实例

1. <div id="app">
   
2.     <div id="counter-event-example">
   
3.       <p>{{ total }}</p>
   8 y, s, q4 v  n! g+ l
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
6.     </div>
   $ ^4 f! ^1 Y( R$ R& q5 D7 \: i
7. </div>
   # W* v3 ]: ~, V2 Z, w
8. 
   ( a$ @8 N- }$ e! {
9. <script>
   
10. Vue.component('button-counter', {
    
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    : e) u- t, P1 D9 M
12.   data: function () {
    
13.     return {
    0 J, z5 P; `+ t4 A, r7 f8 ?
14.       counter: 0
    7 j% A  q7 m: p" J& r4 q
15.     }
    
16.   },
    
17.   methods: {
    $ h2 ^! s0 E5 M
18.     incrementHandler: function () {
    
19.       this.counter += 1
    
20.       this.$emit('increment')
    ; Q3 @! h$ w4 C  z4 n
21.     }
    
22.   },
    . I. X5 T; y: |$ R& ~, ~
23. })
    
24. new Vue({
    6 U0 C% ^! z) O! h6 u: |% X1 @9 z/ A
25.   el: '#counter-event-example',
    7 a; S( ~! P+ k2 E0 \7 }
26.   data: {
    9 b: P5 W3 e7 x0 w7 d2 k
27.     total: 0
    8 b/ f2 S. T7 _: D3 V
28.   },
    
29.   methods: {
    
30.     incrementTotal: function () {
    ; N6 `6 l! h1 j! E6 ?8 P) K9 x
31.       this.total += 1
    ( d% M. S! v7 F! U* W3 K
32.     }
    
33.   }
    ' l0 z; D9 ]2 u% i4 U" T7 d
34. })
    ! S; s+ l* S3 T- c2 F" x, [" U
35. </script>

复制代码

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

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

复制代码

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

1. // 注册
   
2. Vue.component('child', {
   * Y& t, b; D5 L  t, D5 W& W6 k
3.   // 声明 props
   8 y* b4 C4 c- Y6 U3 R; l( l* R+ A
4.   props: ['message'],
   
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   
6.   template: '<span>{{ message }}</span>'
   / N, v1 H: @2 m& H
7. })
   & U! `5 ^6 O7 Q% i8 g. V; l) P6 l' A# u
8. // 创建根实例
   
9. new Vue({
   
10.   el: '#app',
    4 d% x. f- e8 }" h
11.   data:{
    
12.     message:"hello",
    * t( H8 L( n) S* M+ e) l
13.   }
    
14. })

复制代码

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

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

1. methods: {
   1 i; Z9 O* o3 o- M! t
2.     incrementHandler: function (v) {
     E  J  N4 {9 t8 e: _  ^
3.         if(v==1){
   
4.             this.counter -= 1
   + v; x, N* _! }
5.             this.$emit('increment',[1])
   
6.         }else{
   
7.             this.counter += 1
     _7 p$ R( Q) U/ b! v
8.             this.$emit('increment',[2])
   + e( q/ w# ^$ P
9.         }
   
10.     }
    
11. }

复制代码