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,并使用它:
$ ]$ ]% G1 C3 p8 i8 i. m- L4 b( i
  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. // 注册2 t% [, K( U9 p( X
  7. Vue.component('runoob', {
    2 X# r" N) i+ ^
  8.   template: '<h1>自定义组件!</h1>'7 l6 J+ A2 m! ^, p/ n- \, v
  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. }), K; f4 ~* j  e8 P
  14. </script>
复制代码
局部组件
我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:
局部组件实例
注册一个简单的局部组件 runoob,并使用它:

4 y. b+ ^. r& ?6 ]% ]. P
  1. <div id="app">8 h/ m* v; g2 U  P, o5 h
  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. }) P( V( @: r4 k1 b9 H; j6 c
  9. 4 w; C5 [5 E* z
  10. // 创建根实例6 q2 g4 t* A2 {3 s' N
  11. new Vue({9 Q, s3 p4 {7 R1 d
  12.   el: '#app',
    " Y3 F/ U, h, [. @5 N! `" Z, X' w1 s1 V% u
  13.   components: {& l  [8 |) R- @) V% T) i8 Z
  14.     // <runoob> 将只在父模板可用
    3 O3 q3 J. U* y' V0 F# y
  15.     'runoob': Child7 _; `) @2 G; ?5 V
  16.   }" t/ p& [; b( o" F) C; @- L
  17. })" n) N; H7 n7 M5 ?$ b
  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 `: @" n1 j: Y
  3. </div>( ]: ~- A& j: i; p, t
  4. # t2 O) U# v/ b7 p
  5. <script>
    . a1 {5 V9 o; }' t* V- j
  6. // 注册( D5 _5 t: h! t+ t/ j
  7. Vue.component('child', {
    7 v" i9 b0 a5 n$ Y
  8.   // 声明 props4 |- r1 L) w& p
  9.   props: ['message'],
    4 X8 X" j$ W8 z5 R* d5 P4 o
  10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用0 r( H! O! s1 G2 U
  11.   template: '<span>{{ message }}</span>'
    0 r  A$ F% q0 a3 x$ w! m
  12. })/ u% V' E: Q2 y
  13. // 创建根实例
    3 q3 I# O( i  }5 e
  14. new Vue({0 v2 {" T- r$ W0 r7 [
  15.   el: '#app'2 A& O6 D3 J% s, I7 T
  16. })  t( t: E" g8 _$ F4 x4 ]5 t
  17. </script>
复制代码
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:
Prop 实例+ P5 l1 \/ V# Q# Z
  1. <div id="app"># w+ p3 l& g4 O- I" u! j" T8 ?
  2.     <div>4 D3 v/ ^9 ^& n5 |5 n5 R
  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>" V# F: k0 J+ e  Y! ]! b
  6.     </div>
      s, J6 `$ r# t! w0 d# S) s- ]
  7. </div>  o8 b5 `* o4 j4 C9 ]. @
  8. " `1 {8 X' p& G( p
  9. <script>6 A' E: h# {9 k( Z/ t2 c/ V
  10. // 注册
    4 l+ K8 f, N  `
  11. Vue.component('child', {5 \, h( S  E0 D( v: t& i& F
  12.   // 声明 props
    9 F' z2 k: f6 @: ^' v: v
  13.   props: ['message'],
    ! v+ u7 }9 f7 {! \! P2 l
  14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用6 G4 h( s# a+ ~: {
  15.   template: '<span>{{ message }}</span>'6 b$ ~$ ]; e0 Q; p7 N4 m; l: q
  16. })
    6 O6 x! e- A; \( o
  17. // 创建根实例& Q3 H7 H/ R8 A+ ]7 i4 ?; t
  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: {3 s% Y" D2 N% {% y- Q/ e
  21.     parentMsg: '父组件内容'
    & z1 [# c) t, {7 U
  22.   }
    - t( v6 M: ]  f: P6 C& V2 K
  23. }), U8 M/ e5 f- |3 Q- @7 I, E
  24. </script>
复制代码
以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中:
Prop 实例
( c# J4 f1 C% K9 @9 n
  1. <div id="app">* P$ s0 z7 H' t& T
  2.     <ol>- E( C* y0 t: U8 `
  3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>8 }% L+ N8 v( {; V
  4.       </ol>
    * x0 F9 p- U/ v& C* v6 @
  5. </div>" F/ e) ~- [' m
  6. 3 j3 D6 o; K; ~
  7. <script>
    % Q$ u" ^0 A! b( R, \2 }/ n
  8. Vue.component('todo-item', {( W3 `+ d; d4 |& S5 [
  9.   props: ['todo'],  A. \& j) _; I5 \2 @8 q7 _- T
  10.   template: '<li>{{ todo.text }}</li>'0 G6 a$ Y" D8 a$ Q3 i5 C! L- Z5 C
  11. })# t  {$ c* y1 u/ ?) I7 [! y) S6 I8 }
  12. new Vue({
    ( H- Y% L' G/ {, O& h4 ^9 X6 H
  13.   el: '#app',+ q1 H2 X# n0 Q. n9 b* b8 T/ n8 _
  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' }5 s  ]: Z0 y4 l/ X) w
  19.     ]% L( p; V: ?1 }' Y9 E' v
  20.   }
    7 r$ k' ]# I8 v2 `; N4 {% m9 v9 U
  21. })1 u/ G+ v/ s; c5 h. U- y+ ~2 i+ Y) Z
  22. </script>
复制代码
注意: prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。
Prop 验证
组件可以为 props 指定验证要求。
prop 是一个对象而不是字符串数组时,它包含验证要求:
  1. Vue.component('example', {+ B' }4 e) o1 L+ ]: b' j# G
  2.   props: {0 S7 C+ m9 ~) g
  3.     // 基础类型检测 (`null` 意思是任何类型都可以)) {8 ?* l0 W) e  T# z7 g$ I/ g
  4.     propA: Number,0 X5 X# Z3 c  v- z2 Q: N: a
  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! }* f2 ~) e' e* `4 V8 T" U; O5 W
  11.     },
    ; k6 n) H0 J) P( S2 N4 g
  12.     // 数字,有默认值" @' U& L. ?9 t3 h  m" e
  13.     propD: {5 u% K; m8 a  z) Q
  14.       type: Number,
    ( d+ k& W0 T+ X" ^
  15.       default: 100: W6 T" k# `( p& i
  16.     },6 a  w  }. y/ p1 y6 ]1 |  F
  17.     // 数组/对象的默认值应当由一个工厂函数返回8 U# d/ l7 D& p( t8 A
  18.     propE: {
    % r0 {8 y6 H7 Q0 @4 v+ k
  19.       type: Object,. H* X5 s1 \& b- l, Q) D. z
  20.       default: function () {
    : I8 E# Y0 P; w  s5 ~+ {5 K3 }! |
  21.         return { message: 'hello' }
    0 Q+ E6 `% \0 x# k  R
  22.       }3 I9 W/ k8 L% [6 `/ y& r
  23.     },
    9 B2 u- P" R2 n* {
  24.     // 自定义验证函数
    $ }0 o# Y: C2 z
  25.     propF: {) `: {2 D" _. k7 O( B9 @) I$ [
  26.       validator: function (value) {
    % t- X7 [+ G* t' m2 |9 ?
  27.         return value > 10
    9 D& s7 A3 a/ B0 _7 Q6 r) [
  28.       }4 d2 d4 G9 f! x3 Y8 [+ _. U
  29.     }& A7 j7 c4 E. h
  30.   }9 t' L. q4 y4 u6 `, w
  31. })
复制代码
type 可以是下面原生构造器:
type 也可以是一个自定义构造器,使用 instanceof 检测。

自定义事件
父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:
另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
实例
- ?  T: }5 u! ]$ j. C: D
  1. <div id="app">6 I5 l, ]& Y) q! n! r" q9 P
  2.     <div id="counter-event-example">
    0 U+ E4 r  M" A5 o; o; l
  3.       <p>{{ total }}</p>/ \* q; J$ C- D1 [/ {
  4.       <button-counter v-on:increment="incrementTotal"></button-counter>9 D% n3 o  B4 t* ]8 o8 o6 g2 }- w
  5.       <button-counter v-on:increment="incrementTotal"></button-counter>5 n3 S+ d. H+ n+ \0 d
  6.     </div>; ~2 X  J" {) n' Z3 y4 i  I9 z4 H
  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', {5 B3 G7 i) Z. V+ E/ A2 g8 w4 r
  11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    9 ^# e" ^& X; j; Z
  12.   data: function () {4 K; _% [9 ~" F& Y
  13.     return {
    # L5 N- [# \3 O. X
  14.       counter: 0$ Q7 a4 A1 R- X2 g
  15.     }
    1 ]3 D/ O/ V: I+ p
  16.   },& @. W6 y" D) I7 Y. `/ ^5 d) c4 B" U
  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.     }! Y) w+ K8 d; a# w
  22.   },
    8 M: B9 o7 O6 }
  23. })7 l# \! f6 k- u4 s
  24. new Vue({" p7 u" N$ v( q9 w
  25.   el: '#counter-event-example',
    ' w0 Y8 G) H, }( @; K
  26.   data: {+ ^5 k7 T$ ]% Y7 |, n' o
  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 () {- n" W7 f, e* G. |7 ~3 T
  31.       this.total += 17 y$ w# |3 {0 D( K
  32.     }
    + l' K1 ?7 |1 r- [" M  t8 `
  33.   }9 K3 m/ Q! X. }. h( W# T9 O
  34. })5 X" c" [) a0 C7 g
  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# z1 n3 b3 Z8 s  s$ @, i5 I
  4.   props: ['message'],' _* A4 D8 k, M" e/ [; q3 c5 \
  5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用* P8 H7 H! K0 }3 s
  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({/ y- A# C" n9 H: y
  10.   el: '#app',8 G! V( C+ Y+ Y# e, G
  11.   data:{! P/ R5 x- k7 T, J  {) ~( r1 G  E- t! u
  12.     message:"hello",/ R& v; L7 n( Z$ J6 d0 s4 q
  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 m- Q" t+ r  [+ B  f" F
  7.             this.counter += 1
    ) U+ u5 T( O, c1 S. D4 {0 a' k
  8.             this.$emit('increment',[2])$ ^4 |7 U5 D- |9 x8 O7 g' t6 Q
  9.         }3 G" c0 O0 i7 r7 E" A" g3 R& V
  10.     }7 ?" W8 ?  C; Y" g
  11. }
复制代码

+ _0 `% D4 I6 p8 o9 E: q5 g- s8 g7 s2 K- J( M' M7 |: c. T





欢迎光临 cncml手绘网 (http://www.cncml.com/) Powered by Discuz! X3.2