cncml手绘网

标题: Vue.js 组件 [打印本页]

---

作者: admin    时间: 2018-7-4 11:28
标题: Vue.js 组件

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

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

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

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

1. Vue.component(tagName, options)

复制代码

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

1. <tagName></tagName>

复制代码

全局组件

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

全局组件实例

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

1. <div id="app">
   : ], ]* h7 n" c: M0 D
2.     <runoob></runoob>
   4 ^, T6 h2 v9 p6 @6 z" O" C3 `' c
3. </div>
   ! }/ g5 l/ I2 ^% k4 f7 M" V( \
4. 
   & e+ l6 d! V# Z: o
5. <script>
   * N+ t3 }( [% I9 b  L! k9 A
6. // 注册
   
7. Vue.component('runoob', {
   2 X# r" N) i+ ^
8.   template: '<h1>自定义组件!</h1>'
   
9. })
   3 ]- C. h! t% v
10. // 创建根实例
    9 ^' c4 q0 w+ m
11. new Vue({
    8 Z' h5 f; Z6 ?! L' S
12.   el: '#app'
    * c6 R! E% X8 y; F# u* T' p
13. })
    
14. </script>

复制代码

局部组件

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

局部组件实例

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

4 y. b+ ^. r& ?6 ]% ]. P

1. <div id="app">
   
2.     <runoob></runoob>
   ! X5 l1 t) K2 K0 R0 V8 i0 q7 U
3. </div>
   0 W/ R7 ]6 g& ?2 J
4. 
   / j6 Y% {( N+ {. x) Z) [. P
5. <script>
   : j# p" }& M6 b$ J0 e
6. var Child = {
   - O& ^- U) S6 q
7.   template: '<h1>自定义组件!</h1>'
   / |% u- M. f% K2 A/ @
8. }
   
9. 
   
10. // 创建根实例
    
11. new Vue({
    
12.   el: '#app',
    " Y3 F/ U, h, [. @5 N! `" Z, X' w1 s1 V% u
13.   components: {
    
14.     // <runoob> 将只在父模板可用
    3 O3 q3 J. U* y' V0 F# y
15.     'runoob': Child
    
16.   }
    
17. })
    
18. </script>

复制代码

Prop

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

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

Prop 实例
3 c  U- O1 @! v. t' b

1. <div id="app">
   ( j; ?) O$ g! @7 N
2.     <child message="hello!"></child>
   
3. </div>
   
4. 
   
5. <script>
   . a1 {5 V9 o; }' t* V- j
6. // 注册
   
7. Vue.component('child', {
   7 v" i9 b0 a5 n$ Y
8.   // 声明 props
   
9.   props: ['message'],
   4 X8 X" j$ W8 z5 R* d5 P4 o
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    
11.   template: '<span>{{ message }}</span>'
    0 r  A$ F% q0 a3 x$ w! m
12. })
    
13. // 创建根实例
    3 q3 I# O( i  }5 e
14. new Vue({
    
15.   el: '#app'
    
16. })
    
17. </script>

复制代码

动态 Prop

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

Prop 实例

1. <div id="app">
   
2.     <div>
   
3.       <input v-model="parentMsg">
   3 w: L* ~% Y& `1 ~# B
4.       <br>
   , N* N& K1 B! F, T7 d4 {" Q# }
5.       <child v-bind:message="parentMsg"></child>
   
6.     </div>
     s, J6 `$ r# t! w0 d# S) s- ]
7. </div>
   
8. 
   
9. <script>
   
10. // 注册
    4 l+ K8 f, N  `
11. Vue.component('child', {
    
12.   // 声明 props
    9 F' z2 k: f6 @: ^' v: v
13.   props: ['message'],
    ! v+ u7 }9 f7 {! \! P2 l
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    
15.   template: '<span>{{ message }}</span>'
    
16. })
    6 O6 x! e- A; \( o
17. // 创建根实例
    
18. new Vue({
    . Q* z: T- ^& M) ]4 U+ c  J' y
19.   el: '#app',
    ; C6 j5 f; ~' q2 L" j. |9 o/ l
20.   data: {
    
21.     parentMsg: '父组件内容'
    & z1 [# c) t, {7 U
22.   }
    - t( v6 M: ]  f: P6 C& V2 K
23. })
    
24. </script>

复制代码

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

Prop 实例
( c# J4 f1 C% K9 @9 n

1. <div id="app">
   
2.     <ol>
   
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   
4.       </ol>
   * x0 F9 p- U/ v& C* v6 @
5. </div>
   
6. 
   
7. <script>
   % Q$ u" ^0 A! b( R, \2 }/ n
8. Vue.component('todo-item', {
   
9.   props: ['todo'],
   
10.   template: '<li>{{ todo.text }}</li>'
    
11. })
    
12. new Vue({
    ( H- Y% L' G/ {, O& h4 ^9 X6 H
13.   el: '#app',
    
14.   data: {
    - ^5 `7 Y- c; I& s
15.     sites: [
    ; ]" ^$ G4 ~- X7 U
16.       { text: 'Runoob' },
    * P5 k7 V" W& x, T. c/ ]" l# {
17.       { text: 'Google' },
    ; h; y, b) E6 ~" |% |' S6 j
18.       { text: 'Taobao' }
    
19.     ]
    
20.   }
    7 r$ k' ]# I8 v2 `; N4 {% m9 v9 U
21. })
    
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   
2.   props: {
   
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   
4.     propA: Number,
   
5.     // 多种类型
   % k& A  f8 n  P
6.     propB: [String, Number],
   1 z* P" w" N2 p0 B& f" O$ U: S) A
7.     // 必传且是字符串
   7 R. i6 x- ~6 x5 g% A
8.     propC: {
   2 ^# K0 e% n- w. X/ u" j& }3 ^+ Y
9.       type: String,
   ' d& ~$ @4 E6 h, Y3 Y0 A' [
10.       required: true
    
11.     },
    ; k6 n) H0 J) P( S2 N4 g
12.     // 数字，有默认值
    
13.     propD: {
    
14.       type: Number,
    ( d+ k& W0 T+ X" ^
15.       default: 100
    
16.     },
    
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    % r0 {8 y6 H7 Q0 @4 v+ k
19.       type: Object,
    
20.       default: function () {
    : I8 E# Y0 P; w  s5 ~+ {5 K3 }! |
21.         return { message: 'hello' }
    0 Q+ E6 `% \0 x# k  R
22.       }
    
23.     },
    9 B2 u- P" R2 n* {
24.     // 自定义验证函数
    $ }0 o# Y: C2 z
25.     propF: {
    
26.       validator: function (value) {
    % t- X7 [+ G* t' m2 |9 ?
27.         return value > 10
    9 D& s7 A3 a/ B0 _7 Q6 r) [
28.       }
    
29.     }
    
30.   }
    
31. })

复制代码

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

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

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  ' Y' A: k2 m" Q1 ?2 U

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

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

实例
- ?  T: }5 u! ]$ j. C: D

1. <div id="app">
   
2.     <div id="counter-event-example">
   0 U+ E4 r  M" A5 o; o; l
3.       <p>{{ total }}</p>
   
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
6.     </div>
   
7. </div>
   # U; n5 D% G' h) k5 R% W
8. 
     |/ L5 A: d! L2 G6 R
9. <script>
   2 k0 u, e+ f+ E/ n
10. Vue.component('button-counter', {
    
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    9 ^# e" ^& X; j; Z
12.   data: function () {
    
13.     return {
    # L5 N- [# \3 O. X
14.       counter: 0
    
15.     }
    1 ]3 D/ O/ V: I+ p
16.   },
    
17.   methods: {
    2 A. m- R) P, y! {0 K/ o8 \
18.     incrementHandler: function () {
    ; y; u/ ]1 h* i" F0 e+ _% n! N
19.       this.counter += 1
    + A  R6 c$ g' O7 N) B5 C
20.       this.$emit('increment')
    " K2 ?# n/ I' U: e' h$ g
21.     }
    
22.   },
    8 M: B9 o7 O6 }
23. })
    
24. new Vue({
    
25.   el: '#counter-event-example',
    ' w0 Y8 G) H, }( @; K
26.   data: {
    
27.     total: 0
    ( i7 c  x3 N) y% j1 E8 M6 U
28.   },
    # H% g! C* k+ w( q% c
29.   methods: {
    ; G5 T" u7 k1 z' g# H# |6 N/ I, E
30.     incrementTotal: function () {
    
31.       this.total += 1
    
32.     }
    + l' K1 ?7 |1 r- [" M  t8 `
33.   }
    
34. })
    
35. </script>

复制代码

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

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

复制代码

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

1. // 注册
   . C  C2 b, K5 T. K2 R! m
2. Vue.component('child', {
   ' ]5 b) b2 n7 H" E& Y7 M
3.   // 声明 props
   
4.   props: ['message'],
   
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   
6.   template: '<span>{{ message }}</span>'
   , u6 j6 a+ K# P
7. })
   - k* J4 f6 q$ e3 Y3 G
8. // 创建根实例
   % ~0 S% {; m/ D) D. [5 p4 Q
9. new Vue({
   
10.   el: '#app',
    
11.   data:{
    
12.     message:"hello",
    
13.   }
    ( r% o3 z+ K5 }. t$ P# {
14. })

复制代码

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

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

1. methods: {
   . @& ^2 }) t2 @  X# H
2.     incrementHandler: function (v) {
   # y' _/ z; J; Y$ i* t
3.         if(v==1){
   2 R9 A* F% v) R; j/ P  o1 W- M
4.             this.counter -= 1
   9 m* ]' l$ m7 x, D' P% j' _1 i
5.             this.$emit('increment',[1])
   " o( ~! g# L* K8 y, U
6.         }else{
   
7.             this.counter += 1
   ) U+ u5 T( O, c1 S. D4 {0 a' k
8.             this.$emit('increment',[2])
   
9.         }
   
10.     }
    
11. }

复制代码

+ _0 `% D4 I6 p8 o9 E: q

---

欢迎光临 cncml手绘网 (http://www.cncml.com/)

Powered by Discuz! X3.2