Vue.js 组件

admin

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

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

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

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

1. Vue.component(tagName, options)

复制代码

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

1. <tagName></tagName>

复制代码

全局组件

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

全局组件实例

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

. k* E/ H! S" L

1. <div id="app">
   5 E2 A1 l& B3 G2 }. s6 J
2.     <runoob></runoob>
   ' \+ S+ v" O$ \. q/ _5 X8 G9 C. D
3. </div>
   
4. 
   
5. <script>
   
6. // 注册
   ; X6 b; e- d; B3 J$ ~
7. Vue.component('runoob', {
   
8.   template: '<h1>自定义组件!</h1>'
   # y7 u! G  m) H3 l
9. })
   
10. // 创建根实例
    $ u: X! o; ]& s
11. new Vue({
    
12.   el: '#app'
    
13. })
    & G( R$ W6 y9 X: }1 j
14. </script>

复制代码

局部组件

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

局部组件实例

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

: u1 `9 ]# U& O1 r6 [  N  y

1. <div id="app">
   # t( u. z* R, ~8 g4 M; V* N
2.     <runoob></runoob>
   ) q9 Y  x2 W0 ]7 Y& n" Z+ v
3. </div>
   
4. 
   ' J, i5 X" e9 N9 Q
5. <script>
   4 }5 g* x9 S( i+ Z4 J" M' [
6. var Child = {
   
7.   template: '<h1>自定义组件!</h1>'
   
8. }
   
9. 
   5 p6 @, u$ W/ N! M% ~& H/ K6 m& I
10. // 创建根实例
      \9 u: D# Q- x- |  G" x
11. new Vue({
    
12.   el: '#app',
    
13.   components: {
    
14.     // <runoob> 将只在父模板可用
    " l# j9 |' C0 Y. h$ K
15.     'runoob': Child
    " W% r: e! T) a9 Y
16.   }
    * k2 d1 I) Q' Q" E* j
17. })
    
18. </script>

复制代码

Prop

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

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

Prop 实例

1. <div id="app">
   
2.     <child message="hello!"></child>
   
3. </div>
   ) r' I5 N+ A8 J) y7 P" n4 _
4. 
   
5. <script>
   
6. // 注册
   - |$ g: J7 b  I( k# f% a
7. Vue.component('child', {
   & E  I2 X7 v! |( j+ @5 U+ m2 v
8.   // 声明 props
   
9.   props: ['message'],
   
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    
11.   template: '<span>{{ message }}</span>'
      x1 U! \) r) f& n6 `; P. l6 P0 b
12. })
    8 Q" Z/ h, H$ M  S0 L* ]
13. // 创建根实例
    3 v/ j1 I0 [  ~# w
14. new Vue({
    
15.   el: '#app'
    
16. })
    
17. </script>

复制代码

动态 Prop

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

Prop 实例
$ d, J; @0 ~2 p8 c8 c

1. <div id="app">
   6 ^5 Y- A# I% t5 \* ?! k
2.     <div>
   ' |' ?1 F0 w0 U6 r) T2 P1 J7 L
3.       <input v-model="parentMsg">
   
4.       <br>
   9 p3 _1 O& B0 t, x
5.       <child v-bind:message="parentMsg"></child>
   2 \  T9 a. I/ k; `4 l* f6 V
6.     </div>
   
7. </div>
   
8. 
   
9. <script>
   * L' S, }! ^0 m7 T! G8 J. v
10. // 注册
    # @- T( S- k3 V" d7 s1 }
11. Vue.component('child', {
    
12.   // 声明 props
    $ ?3 d5 H# R- G. A2 M
13.   props: ['message'],
      p! g3 k3 n7 L0 Y7 B
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    2 H, J0 E: g0 f0 U6 {$ Y
15.   template: '<span>{{ message }}</span>'
    " a4 K" Y' C! _: P
16. })
    ) h# g# A& b7 v
17. // 创建根实例
    
18. new Vue({
    & f( U, Q& E7 B; q
19.   el: '#app',
    - c1 Q- W$ p$ P& w
20.   data: {
    
21.     parentMsg: '父组件内容'
    # t; B) @0 k* f0 x* `6 O7 R; @
22.   }
    
23. })
    ( o9 r( E1 h9 B
24. </script>

复制代码

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

Prop 实例
; e6 r; M+ S# U- E9 o

1. <div id="app">
   5 u  N' M: u5 F8 N
2.     <ol>
   
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   1 @) w. z) {- {+ O
4.       </ol>
   ; o  `5 v8 C; x( K  y
5. </div>
   7 Q. y! S" I2 y8 e
6. 
   
7. <script>
   
8. Vue.component('todo-item', {
   % u6 P- e) H# v" K% p: u4 Y% S
9.   props: ['todo'],
   9 @2 K0 a# j8 Q2 U8 b7 h2 m
10.   template: '<li>{{ todo.text }}</li>'
    % C9 p7 H( b' q: ~8 r
11. })
    
12. new Vue({
    & x! J0 o9 h; G" a) N3 Z; r1 @2 Z
13.   el: '#app',
    
14.   data: {
    
15.     sites: [
    2 h2 N8 O0 F; `% Q+ P; i
16.       { text: 'Runoob' },
    
17.       { text: 'Google' },
    
18.       { text: 'Taobao' }
    
19.     ]
    0 S1 I" W& N0 H* Y- z
20.   }
    
21. })
    
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   
2.   props: {
   & @5 J2 o# \: J' p9 h  f" D
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   
4.     propA: Number,
   ; k+ q+ p2 j3 p  _3 q
5.     // 多种类型
   
6.     propB: [String, Number],
   $ ?$ J+ ~( B& P2 r0 R/ l
7.     // 必传且是字符串
   
8.     propC: {
   9 s6 j& b! H& ~! R, x! u
9.       type: String,
   1 {2 ]% v" c$ |' W9 T/ P8 H
10.       required: true
    ( g' F. V' _- d8 [6 q7 I# E& v$ Q: e
11.     },
    
12.     // 数字，有默认值
    8 y* U4 g  e2 M% F$ D' p
13.     propD: {
    
14.       type: Number,
    
15.       default: 100
    
16.     },
    4 W. u* I" \2 c
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    0 `; F* j" O, k8 X' J
19.       type: Object,
    
20.       default: function () {
    ( O! u% Q0 E" s$ n/ _. h9 p& V
21.         return { message: 'hello' }
    
22.       }
    9 _6 U% [& `( k' j# R7 m& E: u
23.     },
    , p; b: z4 `0 E) A
24.     // 自定义验证函数
    
25.     propF: {
    
26.       validator: function (value) {
    , s6 M9 n! F) m0 T( m# o
27.         return value > 10
    
28.       }
    
29.     }
    
30.   }
      W( P, L1 ^2 Q5 {: m- q: D
31. })

复制代码

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

• String
• Number
• Boolean
• Function
• Object
• Array
  

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  + z2 v) `6 |1 U2 [; N& W

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

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

实例
0 J2 S9 \. U: L4 o

1. <div id="app">
   ( \5 G4 u3 e  W3 a
2.     <div id="counter-event-example">
   2 i4 B) F5 r0 ]( O
3.       <p>{{ total }}</p>
   
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   9 W: m4 M4 H" J! _& W, N9 j
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   ( L4 m4 H0 x( m. {6 e4 s: H- k
6.     </div>
   
7. </div>
   6 u$ y; ~$ [4 k
8. 
   . I3 J$ E0 m$ E7 K# z3 w
9. <script>
   ! P+ M+ T5 q' ]/ H/ A# h& \
10. Vue.component('button-counter', {
    
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    
12.   data: function () {
    
13.     return {
    # _" X" y  s$ L4 U3 U+ Q- s
14.       counter: 0
    
15.     }
    7 ?# ~' a; |! K! h6 N0 U
16.   },
    % O* T; f! g6 A4 \5 D& r, X2 q# w
17.   methods: {
    
18.     incrementHandler: function () {
    , P& g+ G1 j8 X+ u$ V
19.       this.counter += 1
    
20.       this.$emit('increment')
    
21.     }
    ' U, C5 M2 A" i/ u$ X- v
22.   },
    $ a9 ]) v, A7 o. ~
23. })
      g- P. B( J5 r, K: [
24. new Vue({
    
25.   el: '#counter-event-example',
    " N' u4 R. ~# S' [' y9 v. K
26.   data: {
    
27.     total: 0
    ) M, h. a6 ?0 l
28.   },
    
29.   methods: {
    2 ]6 B9 X. p1 Q4 H6 C* ]& ?
30.     incrementTotal: function () {
    ) d' R/ |6 O9 n6 B9 L" A
31.       this.total += 1
    ; F& r$ w. y* g/ D: \) k0 Q. K
32.     }
    
33.   }
    
34. })
    
35. </script>

复制代码

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

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

复制代码

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

1. // 注册
   & |1 h# k+ ]/ {6 K: w: n  Z
2. Vue.component('child', {
   
3.   // 声明 props
   # \3 S5 m* Y6 x3 t; D
4.   props: ['message'],
   $ c9 Y  j" a" ~8 }
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   3 ^$ ]. [8 B9 w0 u, U$ \/ b
6.   template: '<span>{{ message }}</span>'
   
7. })
   6 @% w4 ]/ z+ ]# G* O
8. // 创建根实例
   
9. new Vue({
   
10.   el: '#app',
    
11.   data:{
    
12.     message:"hello",
    
13.   }
    
14. })

复制代码

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

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

1. methods: {
   ! s5 Z3 T2 b  s. c$ |2 g
2.     incrementHandler: function (v) {
   
3.         if(v==1){
   , q0 h! s4 H! W, A
4.             this.counter -= 1
   ' q/ v: J# ?, g6 f0 ?+ T- F6 n
5.             this.$emit('increment',[1])
   0 i6 Q( _7 ^, B; r/ |- @
6.         }else{
   3 }6 Q) m( Y' O: W" d1 U: t) l
7.             this.counter += 1
   ) p% K7 {  x8 X$ @$ n
8.             this.$emit('increment',[2])
   ) o2 W: H# E+ v  Q% F* z
9.         }
   
10.     }
    ) p6 c* y: p# E1 h" ?  {$ b2 _
11. }

复制代码