Vue.js 组件

admin

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

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

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

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

1. Vue.component(tagName, options)

复制代码

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

1. <tagName></tagName>

复制代码

全局组件

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

全局组件实例

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

  k/ o( j- V7 R. x# p

1. <div id="app">
   9 m( b3 O( q7 D  v9 B+ P
2.     <runoob></runoob>
   
3. </div>
   
4. 
   
5. <script>
   
6. // 注册
   4 C5 i/ T# y, t* j& d9 P. h  D
7. Vue.component('runoob', {
   ) l& S+ v! m, x, U# {& r
8.   template: '<h1>自定义组件!</h1>'
   
9. })
   
10. // 创建根实例
    8 d" E% k8 r! Y1 X3 |* H* z5 E
11. new Vue({
    3 l' k9 o1 m* Z" Z/ ]8 ^
12.   el: '#app'
    
13. })
    ( {$ [2 l/ q. U8 G/ P- C( t. {  D
14. </script>

复制代码

局部组件

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

局部组件实例

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

# k: p9 T8 Q' s

1. <div id="app">
   9 r% X. v' ]9 n
2.     <runoob></runoob>
   
3. </div>
   ' m. ^# O8 A9 l
4. 
   3 _0 Y) d& M& {5 R2 C
5. <script>
   
6. var Child = {
   4 l) w: d; Y# m
7.   template: '<h1>自定义组件!</h1>'
   
8. }
   
9. 
   : e; ^; Z4 v: D" C7 i  S3 `
10. // 创建根实例
    ' k/ Z; j7 d) Y+ l$ U- w
11. new Vue({
    
12.   el: '#app',
    ) V9 E) ?7 c6 I1 g
13.   components: {
    
14.     // <runoob> 将只在父模板可用
    
15.     'runoob': Child
    / Z' W5 g: d/ }% t; Y1 z. A. V* ~8 _# x
16.   }
    6 \) }+ |9 U, ^5 ]5 F  q
17. })
    
18. </script>

复制代码

Prop

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

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

Prop 实例

1. <div id="app">
   
2.     <child message="hello!"></child>
   
3. </div>
   
4. 
   
5. <script>
   
6. // 注册
   " m! g8 b' d& y5 P
7. Vue.component('child', {
   ! t7 ~0 _( [/ u; b+ E) J
8.   // 声明 props
   
9.   props: ['message'],
   - y" \6 s) A; u* I+ o
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    1 K, `' u2 u) L* {# i4 p
11.   template: '<span>{{ message }}</span>'
    7 [' Z% I' @% l; A# W
12. })
    
13. // 创建根实例
    1 V8 @6 G, f. B# _$ H8 j
14. new Vue({
    7 G- n+ b3 Q6 y# ~  l( y
15.   el: '#app'
    
16. })
    9 F$ ^3 \' u5 L8 f+ z9 o, a0 w
17. </script>

复制代码

动态 Prop

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

Prop 实例

1. <div id="app">
   
2.     <div>
   8 B: M* a& t/ j" \$ l8 v% y
3.       <input v-model="parentMsg">
   
4.       <br>
   
5.       <child v-bind:message="parentMsg"></child>
   . w3 T! i# }) s9 l) v( {; ]
6.     </div>
   $ @5 l/ j" h' e: H) H
7. </div>
   
8. 
   
9. <script>
   
10. // 注册
    4 o5 z1 G$ G2 h% c+ e; `- _
11. Vue.component('child', {
    0 q: a. p/ o* z: ?$ O# M
12.   // 声明 props
    * W; i( G3 W( m  K7 F
13.   props: ['message'],
    : w# B2 y: u. }/ Y7 k+ n# S! u; M
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    / J4 k, w! x2 T% _
15.   template: '<span>{{ message }}</span>'
    2 n5 N' S" g! `3 n) n/ x1 O
16. })
    
17. // 创建根实例
    
18. new Vue({
    . P; M# u5 y$ z6 s8 E- P! t
19.   el: '#app',
    0 W. k( `2 G/ `
20.   data: {
    
21.     parentMsg: '父组件内容'
    
22.   }
    
23. })
    
24. </script>

复制代码

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

Prop 实例
1 G. T8 h+ [+ }! c2 K2 k, G/ b

1. <div id="app">
   
2.     <ol>
   & Z+ u1 }* S; y; G( S, i
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   
4.       </ol>
   % n0 o# p+ K- ?$ K4 y& J3 S6 K
5. </div>
   
6. 
   
7. <script>
   
8. Vue.component('todo-item', {
   3 z* \/ M0 J- |8 b& u2 @
9.   props: ['todo'],
   : b9 O- R  W. _4 p# R9 R
10.   template: '<li>{{ todo.text }}</li>'
    
11. })
    
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    $ N( r' }" @% U, e: b, M
15.     sites: [
    
16.       { text: 'Runoob' },
    
17.       { text: 'Google' },
    7 R6 C! b+ U0 @" w( C2 @
18.       { text: 'Taobao' }
    
19.     ]
    , t* T; d' v5 p; U, b
20.   }
    1 Y0 h' {8 c5 [& m/ E/ ^4 S
21. })
    
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   2 \5 B/ C$ k2 v; e
2.   props: {
   
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   
4.     propA: Number,
   
5.     // 多种类型
   
6.     propB: [String, Number],
     G+ W" u) d) y. B( R" N+ C. M
7.     // 必传且是字符串
   7 s& q$ D( z+ I' t
8.     propC: {
   : L9 O) B1 z& e
9.       type: String,
   
10.       required: true
    0 g* u- b3 v" N3 s% s: `- s5 E4 c
11.     },
    
12.     // 数字，有默认值
    
13.     propD: {
    ! n3 T# g" r% F4 g0 W2 c8 ]: u8 f
14.       type: Number,
    % @+ _; i  K  i( |
15.       default: 100
    
16.     },
    
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    # x. }8 q: M. M+ {5 a" j
19.       type: Object,
    
20.       default: function () {
    . [& w4 z( Z* e) s5 b
21.         return { message: 'hello' }
    
22.       }
    % B1 Y0 `/ @8 H7 ~0 e- D, @
23.     },
    
24.     // 自定义验证函数
    
25.     propF: {
    
26.       validator: function (value) {
    
27.         return value > 10
    
28.       }
    
29.     }
    
30.   }
    * V  v: p) ~5 b
31. })

复制代码

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

• String
• Number
• Boolean
• Function
• Object
• Array
  $ ?) {# L" m* m: l' Y

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  ' Y) s4 u* F; S/ x

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

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

实例

1. <div id="app">
   + I- d: d- w( W" }
2.     <div id="counter-event-example">
   , d: o4 j# v/ m: f; q" m9 a0 a
3.       <p>{{ total }}</p>
   7 h) B! `/ x+ p1 J# X1 f0 a% E
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   4 @5 E# a3 ~6 m8 y
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
6.     </div>
   
7. </div>
   ; b/ B! }9 j/ i& s( ]
8. 
   
9. <script>
   
10. Vue.component('button-counter', {
    & @( m0 D( f" ]/ [$ k
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    
12.   data: function () {
    
13.     return {
    ; v5 m3 G2 Z* G1 y
14.       counter: 0
    
15.     }
    & c& P0 m+ R3 G5 I- H0 Q
16.   },
    
17.   methods: {
    1 H+ \9 H$ F; W8 s. B& `
18.     incrementHandler: function () {
    
19.       this.counter += 1
    
20.       this.$emit('increment')
    
21.     }
    
22.   },
    5 S5 d# `+ P  E2 b) @1 u
23. })
    
24. new Vue({
    , u. C- H# X4 @2 v' y8 ^# k- p0 o
25.   el: '#counter-event-example',
    " H: _& q; D8 k) K
26.   data: {
    
27.     total: 0
    
28.   },
    
29.   methods: {
    
30.     incrementTotal: function () {
    
31.       this.total += 1
    
32.     }
    9 Q9 v* x: Y" X
33.   }
    7 R6 B2 L* T8 N0 `$ z
34. })
    
35. </script>

复制代码

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

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

复制代码

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

1. // 注册
   
2. Vue.component('child', {
   0 D, f& M3 {* d1 O8 `2 ]% i0 ?
3.   // 声明 props
   
4.   props: ['message'],
   
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   
6.   template: '<span>{{ message }}</span>'
   
7. })
   
8. // 创建根实例
   
9. new Vue({
   6 N& n5 q$ H- b
10.   el: '#app',
    
11.   data:{
    
12.     message:"hello",
    # G2 y  M0 h# m* M
13.   }
    " x, w. x1 _% u  |
14. })

复制代码

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

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

1. methods: {
   
2.     incrementHandler: function (v) {
   ) }0 z7 L% w1 i! s- Q
3.         if(v==1){
   + `" F! T6 Q2 [# o2 G; R4 ?' _
4.             this.counter -= 1
   
5.             this.$emit('increment',[1])
   
6.         }else{
     E" s; V4 {* A3 u, d$ }; g
7.             this.counter += 1
   
8.             this.$emit('increment',[2])
   " p) q6 v8 E5 o* T: a
9.         }
   
10.     }
    
11. }

复制代码

) N5 c% U4 T# X5 H: r