Vue.js 组件

admin

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

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

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

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

1. Vue.component(tagName, options)

复制代码

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

1. <tagName></tagName>

复制代码

全局组件

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

全局组件实例

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

# l) |- s$ R  @, e" z! W

1. <div id="app">
   
2.     <runoob></runoob>
   
3. </div>
     }1 A+ K4 g3 ?3 b9 H7 _! b
4. 
   8 X2 U) v2 Z# `$ {4 e
5. <script>
   
6. // 注册
   ' [) M' w7 g) R7 P) `; ~* s
7. Vue.component('runoob', {
   3 U! e) G- f  I# f; s" a
8.   template: '<h1>自定义组件!</h1>'
   & b. i0 T* e3 W, B9 W* J- o  }
9. })
   5 Q0 U' [# Z) Q+ G7 _
10. // 创建根实例
    
11. new Vue({
    + \% w; c7 r# Q- \, {
12.   el: '#app'
    1 S. y6 \1 ]7 B( N6 u; w
13. })
    
14. </script>

复制代码

局部组件

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

局部组件实例

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

8 [* U5 s- t7 l( Y

1. <div id="app">
   % m; I0 h& h+ m$ I, ?
2.     <runoob></runoob>
   
3. </div>
   6 _6 e8 n1 S7 a6 a+ ?+ L5 W
4. 
   ) Y4 K, n- j4 d4 a. C, `. z
5. <script>
   
6. var Child = {
   
7.   template: '<h1>自定义组件!</h1>'
   : u: y" ?1 v+ u! h6 h
8. }
   ! A. l: }. E4 u: S# M6 H
9. 
   + d9 y; L$ Z+ C# `
10. // 创建根实例
    7 ^. h) c- z( c+ }, I# A3 M
11. new Vue({
    . C9 a( k0 w+ Q0 w& m
12.   el: '#app',
    # T* t) S9 ?0 i* ~$ z& t
13.   components: {
    ! U3 X; R! p# k5 d9 P- j
14.     // <runoob> 将只在父模板可用
      m! F7 @3 s! o0 o
15.     'runoob': Child
    $ H8 W* @) [: A: }4 g$ a% y& t. i1 D- L
16.   }
    2 i- |& ~- s7 \; g) r
17. })
    / m; ^# d3 b; k% y3 _- S% |) n  G
18. </script>

复制代码

Prop

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

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

Prop 实例

1. <div id="app">
   % y+ H& L5 O6 l# B$ z+ G
2.     <child message="hello!"></child>
   + R2 K4 o. _5 }
3. </div>
   
4. 
   
5. <script>
   ( o$ v2 \  `: t  M2 ]- C) V
6. // 注册
   
7. Vue.component('child', {
   
8.   // 声明 props
   
9.   props: ['message'],
   
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    
11.   template: '<span>{{ message }}</span>'
    
12. })
    
13. // 创建根实例
    * C1 p$ X' w" O* l% P, M
14. new Vue({
    0 a5 o+ s9 k3 k* E& o0 D- R
15.   el: '#app'
    , F* d* }7 e% ?0 d  y
16. })
    
17. </script>

复制代码

动态 Prop

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

Prop 实例
2 }  N- i. h2 P+ J' ?8 u# k( S0 p0 ?

1. <div id="app">
   
2.     <div>
   
3.       <input v-model="parentMsg">
   
4.       <br>
   + @/ p6 t( ^+ Z% C' ^8 e7 q/ Q
5.       <child v-bind:message="parentMsg"></child>
   & r+ y- O0 P) ?* P
6.     </div>
   
7. </div>
   
8. 
   8 _% U7 V( r) p4 g% k' u
9. <script>
   . ?2 ~* E+ J( ?/ _: @  g7 o
10. // 注册
    6 i3 h; @& U# `: j8 c* _
11. Vue.component('child', {
    
12.   // 声明 props
    1 ^2 _% j' u$ u" V: S
13.   props: ['message'],
    , J0 J5 {: x" s
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    ! r# Y$ G  ^7 @) z9 e6 n
15.   template: '<span>{{ message }}</span>'
    
16. })
    
17. // 创建根实例
    6 T" h; t1 [7 B& u7 u; y
18. new Vue({
    
19.   el: '#app',
    
20.   data: {
    9 m8 P! V: w1 @+ M+ z, z" [" H
21.     parentMsg: '父组件内容'
    
22.   }
    
23. })
    
24. </script>

复制代码

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

Prop 实例

1. <div id="app">
   ! {! `+ v: q2 L6 j* j& [
2.     <ol>
   ) _( f* K* W  t$ n
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   8 b2 R" ]3 Y0 z$ Y
4.       </ol>
   ! t# F: B/ V% ~$ h
5. </div>
   
6. 
   & j" o( h+ ^+ r* u
7. <script>
   
8. Vue.component('todo-item', {
   
9.   props: ['todo'],
   
10.   template: '<li>{{ todo.text }}</li>'
    
11. })
    
12. new Vue({
    
13.   el: '#app',
    / B+ v" E  p4 {! Q$ j3 x! J. L5 H
14.   data: {
    
15.     sites: [
    0 H& N& S( @  a
16.       { text: 'Runoob' },
    
17.       { text: 'Google' },
    . @3 r' v( q- n5 u# q7 U$ w+ _
18.       { text: 'Taobao' }
    2 K/ m( k' u) ?8 H! b* }
19.     ]
    : i8 `, F, U4 E
20.   }
    / W( d% W  b3 q8 A8 n" p
21. })
    * t7 j  m, t& Q. E3 r% E3 T6 M* B1 P" v- b
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   
2.   props: {
   
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   
4.     propA: Number,
   : O+ W) r7 s# P
5.     // 多种类型
   6 F; C( U0 i8 _$ L5 V$ W$ |- c' g
6.     propB: [String, Number],
   , q) e# L5 r/ J4 Q
7.     // 必传且是字符串
   
8.     propC: {
   ) u% ]1 ]3 q5 }9 T
9.       type: String,
   
10.       required: true
    . P7 v1 K6 @% D/ ~1 R
11.     },
    
12.     // 数字，有默认值
    * f6 m3 g: m7 \
13.     propD: {
    
14.       type: Number,
    / {) c4 y: `* b) p
15.       default: 100
    
16.     },
    
17.     // 数组／对象的默认值应当由一个工厂函数返回
    1 h( M/ U) B. v* o
18.     propE: {
    * J2 T! P6 V0 |- o. Y
19.       type: Object,
    
20.       default: function () {
    
21.         return { message: 'hello' }
    4 }' U! K4 z) L
22.       }
    % c* C2 K# F' b0 S: }
23.     },
    
24.     // 自定义验证函数
    
25.     propF: {
    
26.       validator: function (value) {
    " b5 H: |( ?" M7 i; ]. Y
27.         return value > 10
    4 B; w7 g! ?1 c: x& Y
28.       }
    # G; W: L# B  [+ @+ o, U' s
29.     }
    
30.   }
    
31. })

复制代码

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

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

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  

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

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

实例

1. <div id="app">
   # c" h$ G% i/ |
2.     <div id="counter-event-example">
   5 S  h% ]9 @( u- y4 @: [
3.       <p>{{ total }}</p>
   
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
6.     </div>
   1 N$ G3 a- r) l1 q
7. </div>
   
8. 
   
9. <script>
   
10. Vue.component('button-counter', {
    
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    + V$ O8 C8 W) m$ I
12.   data: function () {
    
13.     return {
    3 H' q  j4 A6 I4 R* z
14.       counter: 0
    
15.     }
    4 f3 m6 @8 w6 X2 V+ z, [/ V; T
16.   },
    
17.   methods: {
    6 l2 W6 X/ O9 `5 M2 ?  v3 u
18.     incrementHandler: function () {
      G6 {2 N. W  S3 {+ K! ]0 ?& X
19.       this.counter += 1
    
20.       this.$emit('increment')
    8 m( Q% s, Q4 J: }( ?; Z2 X, a
21.     }
    
22.   },
    ) {% g" c. K8 |, o
23. })
    
24. new Vue({
    5 s% l! R* d1 J7 V; h5 j9 ~+ o
25.   el: '#counter-event-example',
    
26.   data: {
    
27.     total: 0
    
28.   },
    
29.   methods: {
    - H5 t# M$ D$ Y$ W4 N4 A
30.     incrementTotal: function () {
    ' m, r# v# {' S+ o: V
31.       this.total += 1
    
32.     }
    " U! |2 p% `( ]  m8 C& ~- a  u
33.   }
    " f7 O0 O3 [6 P; \  d
34. })
    8 z7 O  C" i" ^0 f# s
35. </script>

复制代码

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

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

复制代码

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

1. // 注册
   5 L; k) y' ?: ^# s4 p. n1 x
2. Vue.component('child', {
   $ l% T: V- I7 q! u7 X* @; M+ H
3.   // 声明 props
   
4.   props: ['message'],
   ( {& G2 w; o& _  j, V0 g2 ]
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   $ C; g9 N5 U8 ]& F* M5 ~
6.   template: '<span>{{ message }}</span>'
   4 _3 P' ~/ c* M; I9 z6 H& P8 f
7. })
   5 w" T/ g' [, L
8. // 创建根实例
   " ^& r0 H3 e. @6 Q+ N3 Q( J4 @9 {
9. new Vue({
   / k' [: O4 D0 S+ J
10.   el: '#app',
    ) C+ t2 v- Y* N$ e
11.   data:{
    
12.     message:"hello",
    . E* }' V1 ~; T- ?  U- ?
13.   }
    3 F# s  n: N% p# c& H. ~6 ?
14. })

复制代码

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

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

1. methods: {
   
2.     incrementHandler: function (v) {
   ) Q7 ]" j) N' Q! ^
3.         if(v==1){
   : _0 S. Y5 d; Y& F
4.             this.counter -= 1
   4 l( w4 `7 F# M. m$ }% l
5.             this.$emit('increment',[1])
   " l8 T* I4 e2 n; m4 G" O
6.         }else{
   
7.             this.counter += 1
   5 I1 F  S. B& ^7 l2 q7 w2 V
8.             this.$emit('increment',[2])
   2 t3 r4 h: \& `: v" Q& i
9.         }
   8 z0 U. z8 b# A7 S: w2 }! m0 ^
10.     }
    7 X% K% ]' C! Y; k
11. }

复制代码

/ `) S: I" @1 b$ C