Vue.js 组件

admin

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

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

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

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

1. Vue.component(tagName, options)

复制代码

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

1. <tagName></tagName>

复制代码

全局组件

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

全局组件实例

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

1. <div id="app">
   
2.     <runoob></runoob>
   0 V! `6 Q$ @+ h
3. </div>
   
4. 
   * m8 p: v% {! N: v* ]
5. <script>
   
6. // 注册
   
7. Vue.component('runoob', {
   , ~; g4 ]) f0 k, `+ x+ v# x5 j
8.   template: '<h1>自定义组件!</h1>'
   
9. })
   * K' {- z- V  e, _5 k6 a9 S/ s$ C
10. // 创建根实例
    ) Q# i& P% |. _5 p0 D# [+ E3 o
11. new Vue({
    
12.   el: '#app'
    
13. })
    - s! g# y! O/ P. T/ Q
14. </script>

复制代码

局部组件

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

局部组件实例

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

1. <div id="app">
   
2.     <runoob></runoob>
   
3. </div>
   ; C3 a& V, l3 ?- O$ p
4. 
   
5. <script>
   
6. var Child = {
   2 @5 f# ]- B' w5 K+ `$ e3 e+ w
7.   template: '<h1>自定义组件!</h1>'
   
8. }
   2 l( l+ @6 p' @
9. 
   
10. // 创建根实例
    
11. new Vue({
    $ ~: |* e& d6 @. A
12.   el: '#app',
    / J3 {' L  Y4 u! X* N& d
13.   components: {
    
14.     // <runoob> 将只在父模板可用
    
15.     'runoob': Child
    
16.   }
    . i9 C) c# u1 ~
17. })
    
18. </script>

复制代码

Prop

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

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

Prop 实例
4 `* B4 p+ p* h2 }) n) c4 L

1. <div id="app">
   
2.     <child message="hello!"></child>
   
3. </div>
   
4. 
   
5. <script>
   4 m4 A$ z8 \; s1 Z% d0 t) a0 x- C
6. // 注册
   4 g! L  f- U, M/ Y% R4 z
7. Vue.component('child', {
   
8.   // 声明 props
   * ?  G6 J, @& J) v8 k" z
9.   props: ['message'],
   7 p. Y" D1 v' h9 ^5 p: q
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    - B' U; [5 y7 n4 {0 H
11.   template: '<span>{{ message }}</span>'
      ?5 X4 i, x. H5 P+ V
12. })
    # M" K/ a! s: s  Y' K
13. // 创建根实例
    1 q. v' e* t3 ?
14. new Vue({
    
15.   el: '#app'
    + l; V4 B. X0 K2 B
16. })
    
17. </script>

复制代码

动态 Prop

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

Prop 实例
' D+ f6 \- B! C$ T# ^& c

1. <div id="app">
   
2.     <div>
   
3.       <input v-model="parentMsg">
   
4.       <br>
   
5.       <child v-bind:message="parentMsg"></child>
   2 O3 ?( f2 I9 P9 h) N2 a
6.     </div>
   6 z4 O& k6 ]4 P' g4 F+ p/ W8 ?% z8 X" q
7. </div>
   & R7 j4 V( m# I, b
8. 
   
9. <script>
   
10. // 注册
    ( _7 l6 F7 _% ?$ _8 j/ Q
11. Vue.component('child', {
    
12.   // 声明 props
    
13.   props: ['message'],
    5 E3 a6 l, c( E  ^3 _; Q" l: m
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    
15.   template: '<span>{{ message }}</span>'
    . a7 Q8 q6 b% [. y9 ?* x9 o/ b
16. })
    5 j" q- w& I7 F! R9 o' Y1 w
17. // 创建根实例
    5 H# K8 ^* }7 U; T
18. new Vue({
    2 \* B5 V5 a- |! i. p. x) A. p- r
19.   el: '#app',
    
20.   data: {
    6 ]# M/ L, X+ ~$ w7 Y' }7 W0 E
21.     parentMsg: '父组件内容'
    
22.   }
    - u6 n7 e+ Z3 u7 [
23. })
    
24. </script>

复制代码

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

Prop 实例

1. <div id="app">
   
2.     <ol>
   
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   : x% b. I8 J; f" u9 T# O
4.       </ol>
   4 M5 e* _8 J4 ~8 v
5. </div>
   % k+ P8 V" P" D, F, W
6. 
   
7. <script>
   / g. m( `5 X# `, H" S9 L' G$ |
8. Vue.component('todo-item', {
   : r8 S$ U2 x( |! ~: s& K
9.   props: ['todo'],
   
10.   template: '<li>{{ todo.text }}</li>'
    
11. })
    / o0 `# D' _& W3 f* f! ?# m
12. new Vue({
    ( g% \' a% I+ S# _: @$ W
13.   el: '#app',
    $ z9 H- D0 @/ r$ @
14.   data: {
    
15.     sites: [
    $ t5 O; I- a6 e  {- ?7 U+ b1 B
16.       { text: 'Runoob' },
    1 X$ i) _" s- a& k
17.       { text: 'Google' },
    
18.       { text: 'Taobao' }
    5 f& U4 c8 g. ~. T
19.     ]
    
20.   }
    ( _/ W, G& E  `, }
21. })
    
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   
2.   props: {
   ; D! ~' P4 S+ t- l
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   / _6 L! j# C! `6 N6 j
4.     propA: Number,
   
5.     // 多种类型
   
6.     propB: [String, Number],
   % [6 l+ G9 ?' Q: @8 }6 l
7.     // 必传且是字符串
   
8.     propC: {
   
9.       type: String,
   1 J5 [9 `$ ~6 O# X( h
10.       required: true
    
11.     },
    
12.     // 数字，有默认值
    
13.     propD: {
    
14.       type: Number,
    
15.       default: 100
    
16.     },
    2 a! j$ F" q) Z1 ]( R
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    3 v4 G9 x* G. i
19.       type: Object,
    3 |" Z% n3 e& [. R6 N8 P$ X" }) \
20.       default: function () {
    1 T* }3 L, ]% o' x5 ?4 H% ^- ~
21.         return { message: 'hello' }
    
22.       }
    
23.     },
    
24.     // 自定义验证函数
    $ c; N) s, u) i* I# X) u
25.     propF: {
    % p; n1 x: ], N5 w& {# M
26.       validator: function (value) {
    , A% T  K& H- ^6 Z- M
27.         return value > 10
    3 b# Z+ m5 R) W3 K+ A
28.       }
    
29.     }
    ! X8 {+ w% L+ ]; m1 W
30.   }
    
31. })

复制代码

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

• String
• Number
• Boolean
• Function
• Object
• Array
  0 j& A; y. R( r' M/ d5 F

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  & ]# d# E; H" t8 F0 ~* ?- p$ T9 X9 k

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

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

实例
: a5 k( |0 M+ E

1. <div id="app">
   " T* ^3 j; S- {- l5 {' u+ h8 t
2.     <div id="counter-event-example">
   
3.       <p>{{ total }}</p>
   
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   9 J: W+ I. e  M3 f
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   ( X5 h0 J4 Q. ?0 W$ i
6.     </div>
   & z" D# d. M+ k$ a8 H7 {
7. </div>
   
8. 
   8 n: B% `6 O1 \! A& T( b
9. <script>
   
10. Vue.component('button-counter', {
    ! J3 _8 F0 s$ g. w, L3 ?
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    
12.   data: function () {
    
13.     return {
    
14.       counter: 0
    
15.     }
    
16.   },
    
17.   methods: {
    / u: l- o3 x6 n' ?0 k8 a
18.     incrementHandler: function () {
    
19.       this.counter += 1
    5 Q" j8 d7 D& {& S
20.       this.$emit('increment')
    ! i' C# M( j' k  {6 W& ]  I
21.     }
    
22.   },
    - Z( v/ ?! T& O5 [9 w% j
23. })
    0 K: g/ y& ~- |3 f8 D; P" J+ _
24. new Vue({
    ) K, {( A& v' a5 Q
25.   el: '#counter-event-example',
    
26.   data: {
    
27.     total: 0
    4 J" M  X9 z/ w7 T
28.   },
    
29.   methods: {
    " v- `6 [+ K5 C, j
30.     incrementTotal: function () {
    
31.       this.total += 1
    7 x3 c+ g6 b& T) V6 [
32.     }
    5 C, _# C: x4 Q9 F
33.   }
    
34. })
    
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'],
   + A3 \, O$ F$ K
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   6 o# [7 W- d! o$ T3 }- L9 O
6.   template: '<span>{{ message }}</span>'
   8 }( j- e* B3 v8 q! N# c: c- r+ R
7. })
   
8. // 创建根实例
   
9. new Vue({
   
10.   el: '#app',
      W+ F) R' Y/ V5 n
11.   data:{
    
12.     message:"hello",
    " z1 X9 F9 I: v* a# ]) [8 g: A
13.   }
    3 j3 m( I/ T! ?1 V9 h; p
14. })

复制代码

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

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

1. methods: {
   
2.     incrementHandler: function (v) {
   4 {; w7 o2 p4 [+ L6 @% C3 K, I5 I" w
3.         if(v==1){
   
4.             this.counter -= 1
   
5.             this.$emit('increment',[1])
   ) K9 L  G0 a( f/ x2 }
6.         }else{
   
7.             this.counter += 1
   % }0 V8 p5 o  V: Q3 b0 J, H! @2 m
8.             this.$emit('increment',[2])
   4 j1 G4 y' e) \. m2 T4 \
9.         }
   , Y  ~, U7 _0 Y/ @, z$ y! M3 I9 {
10.     }
    4 `0 e8 v: I/ }1 F2 X6 G0 y' |
11. }

复制代码

6 b9 T* B4 h" p" f