Vue.js 组件

admin

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

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

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

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

1. Vue.component(tagName, options)

复制代码

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

1. <tagName></tagName>

复制代码

全局组件

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

全局组件实例

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

1. <div id="app">
   + [4 H  D4 ?2 z& J) t" T
2.     <runoob></runoob>
   / L# j- }2 ]0 r- N4 C/ `
3. </div>
   
4. 
   
5. <script>
     g2 I5 p7 D/ T
6. // 注册
   
7. Vue.component('runoob', {
   
8.   template: '<h1>自定义组件!</h1>'
   
9. })
   & `' j  f8 V: \, L9 O( T' C
10. // 创建根实例
    / w9 @  k6 K1 f4 _& Q3 Z
11. new Vue({
    ! I4 @. [$ p- v
12.   el: '#app'
    
13. })
    
14. </script>

复制代码

局部组件

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

局部组件实例

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

1. <div id="app">
   
2.     <runoob></runoob>
   $ o: P+ e( B8 |5 u
3. </div>
   " o6 e+ [# w2 ^6 d" I& Y" n
4. 
   ! ?3 f7 ^' o1 V" O) z1 c
5. <script>
   7 R2 [* \! a& @5 f$ x
6. var Child = {
   
7.   template: '<h1>自定义组件!</h1>'
   # P9 E$ [+ T1 S
8. }
   8 u+ `; |* t: m! Q8 O
9. 
   - K" L7 g  E5 O! ?
10. // 创建根实例
    ) X$ r6 i  \8 u  Z4 Z: V
11. new Vue({
    " }2 C" m$ ]8 K/ g9 N" C
12.   el: '#app',
    - e7 X2 @6 L: e8 j8 H4 J3 ^
13.   components: {
    
14.     // <runoob> 将只在父模板可用
    
15.     'runoob': Child
    
16.   }
    * z) b, ^; D( r8 i
17. })
    / d, G/ Q& _6 u, F9 w) \
18. </script>

复制代码

Prop

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

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

Prop 实例

1. <div id="app">
   & c0 Z- Q; k2 b! j$ `: n
2.     <child message="hello!"></child>
   $ f4 d8 H' N" E/ D" Q2 i6 k
3. </div>
   
4. 
   
5. <script>
   $ W8 a+ S0 G5 n8 o
6. // 注册
   " b- T4 Z. t! S/ n# J2 B1 m
7. Vue.component('child', {
   # Q- o9 |' x+ V4 k
8.   // 声明 props
   
9.   props: ['message'],
   1 \" j3 @% Y' l, S7 J, ]  F% b
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    ( z+ |* a4 Q! A* J: e
11.   template: '<span>{{ message }}</span>'
    
12. })
    0 V' }- l/ l8 l3 J! X) m$ q/ F9 T
13. // 创建根实例
    
14. new Vue({
    2 \9 i: w  X. e" F4 E
15.   el: '#app'
    $ U3 S5 ?; I1 K/ y+ b
16. })
    ! p: @: i& q# s9 \* H
17. </script>

复制代码

动态 Prop

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

Prop 实例
/ r! y2 x% p8 _7 e4 L5 s( [! R

1. <div id="app">
   
2.     <div>
   / J* T& ^7 w4 ]2 n. {9 y
3.       <input v-model="parentMsg">
     g. `. ]( Z. U
4.       <br>
   7 a) A% M, b! }2 c3 A; s6 S4 C* T" x/ r
5.       <child v-bind:message="parentMsg"></child>
   
6.     </div>
   6 O3 r) ?! c! |, ?2 @
7. </div>
   8 @3 y4 o  Y2 A- I4 |
8. 
     e& K1 n) N6 a$ B' L% Y5 M2 a+ J% b
9. <script>
   
10. // 注册
    
11. Vue.component('child', {
    8 h$ [6 c  [9 Z7 j* U, Y
12.   // 声明 props
    
13.   props: ['message'],
    
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    
15.   template: '<span>{{ message }}</span>'
    
16. })
    
17. // 创建根实例
    + @0 n4 Z# R6 K/ M* j: b
18. new Vue({
    
19.   el: '#app',
    
20.   data: {
    2 {- i: ~% J$ S' a1 F0 @4 y! d
21.     parentMsg: '父组件内容'
    
22.   }
    
23. })
    9 I( }) a4 ~6 C" |
24. </script>

复制代码

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

Prop 实例

1. <div id="app">
   & S- V. \. ?8 x, s6 \
2.     <ol>
   5 M( \- ~* t( ?$ k* q
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   $ j$ v, v) r2 z% E( c6 H. L
4.       </ol>
   
5. </div>
   ; d3 z3 L6 _, x
6. 
   
7. <script>
   
8. Vue.component('todo-item', {
   
9.   props: ['todo'],
   
10.   template: '<li>{{ todo.text }}</li>'
    
11. })
    : t8 z( u( F9 J; ]# p. i
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    
15.     sites: [
    
16.       { text: 'Runoob' },
    $ N  W8 v$ t: m, O
17.       { text: 'Google' },
    8 F! O- s! r, q  s# e7 ?4 R3 L/ m, ^
18.       { text: 'Taobao' }
    
19.     ]
    
20.   }
    
21. })
    : ]& {$ r% B- n! q# K3 ^( U
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   
2.   props: {
   
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   ; L+ }; C0 \/ I" d( j
4.     propA: Number,
   
5.     // 多种类型
   * V0 f& P" O' e2 k" j+ F, j% z6 L
6.     propB: [String, Number],
   . ?2 [9 O/ [: o0 F* `% u
7.     // 必传且是字符串
   + C9 E# k# I- |9 O7 z
8.     propC: {
   
9.       type: String,
   
10.       required: true
    
11.     },
    
12.     // 数字，有默认值
    
13.     propD: {
    
14.       type: Number,
    % A  M- x& j- F& g5 r. J
15.       default: 100
    5 J9 c1 G. f3 M% J1 T& }, z0 G
16.     },
    6 X* x7 j+ I! m
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    
19.       type: Object,
    
20.       default: function () {
    2 c1 ^/ V2 y1 H+ B% n
21.         return { message: 'hello' }
    8 ^5 ^, O$ L. k& D4 ~
22.       }
    
23.     },
    
24.     // 自定义验证函数
    
25.     propF: {
    $ N8 J. Y" S, o% e
26.       validator: function (value) {
    
27.         return value > 10
    " B7 {. u3 c$ O5 \$ Y' \$ ^. b
28.       }
    
29.     }
    % T, F- b& U3 f/ m! s0 V
30.   }
    
31. })

复制代码

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

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

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
    w* E! Y  X- ]

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

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

实例

1. <div id="app">
   ; _( z3 X# t) `
2.     <div id="counter-event-example">
   - ]5 V- S; H0 k
3.       <p>{{ total }}</p>
   2 Z# W7 k, d! B) ]  \
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   - B" ]9 q0 J$ H4 P7 Z' Y! d
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
6.     </div>
   
7. </div>
   ( {' B1 q) z# \
8. 
   
9. <script>
   0 A6 F- {, J2 Z
10. Vue.component('button-counter', {
    
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    
12.   data: function () {
    
13.     return {
    
14.       counter: 0
    
15.     }
    
16.   },
    
17.   methods: {
    
18.     incrementHandler: function () {
    3 a9 P) i, @2 Q
19.       this.counter += 1
    2 @" m" v- t& s" i! k7 L
20.       this.$emit('increment')
    
21.     }
    + H) U1 ]( z( V; [, f6 N
22.   },
    
23. })
    
24. new Vue({
    
25.   el: '#counter-event-example',
    
26.   data: {
    
27.     total: 0
    
28.   },
    
29.   methods: {
    5 l, F: O  r4 H% o5 {' T( t+ E! U) F4 Q
30.     incrementTotal: function () {
    9 a" E: y+ |  o4 W! J! g% M, g' Q
31.       this.total += 1
    - P' @& j' f. s& U& @8 h) E
32.     }
    
33.   }
    
34. })
    3 x1 x1 w: M9 n6 v. e/ q
35. </script>

复制代码

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

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

复制代码

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

1. // 注册
   " n( V' x+ K: b5 |% w" j
2. Vue.component('child', {
   
3.   // 声明 props
   : a, Q+ R& j7 C! n
4.   props: ['message'],
   ' s0 x' X. y0 W; L0 v
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   
6.   template: '<span>{{ message }}</span>'
   ( d0 y" ^# v" w4 b0 n) J! f: b
7. })
   
8. // 创建根实例
   : o5 X$ {, Y- {0 P# ]
9. new Vue({
   
10.   el: '#app',
    1 v! C' `3 G: Y
11.   data:{
    
12.     message:"hello",
    
13.   }
    
14. })

复制代码

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

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

1. methods: {
   
2.     incrementHandler: function (v) {
   % I- J7 h; S1 V
3.         if(v==1){
   5 U9 `# G2 x$ ]9 m. X# ]. K
4.             this.counter -= 1
   
5.             this.$emit('increment',[1])
   9 s* d8 }: f" J6 j4 I
6.         }else{
   * z/ f; p* w) t0 x- q# Z; Y
7.             this.counter += 1
   
8.             this.$emit('increment',[2])
   
9.         }
   
10.     }
    
11. }

复制代码

0 o3 J/ y; U6 D  W( `" N- w/ ^/ J: `
& \3 X; J6 k. v/ d; ^