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">
   ! K% n' g3 F( m3 z9 Z) C
2.     <runoob></runoob>
   5 p' U3 K: c- V5 Z8 Y0 b1 `
3. </div>
   
4. 
   - ]( O, a/ P  z8 r
5. <script>
   / D3 Q$ f9 M1 Y
6. // 注册
   
7. Vue.component('runoob', {
   
8.   template: '<h1>自定义组件!</h1>'
   
9. })
   
10. // 创建根实例
    
11. new Vue({
    
12.   el: '#app'
    
13. })
    
14. </script>

复制代码

局部组件

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

局部组件实例

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

1. <div id="app">
   & b4 Q+ a3 P) g# X+ }9 l& y6 e
2.     <runoob></runoob>
   & f$ D# e7 n/ x# E
3. </div>
   2 }& ]9 ?4 L& n& o  t
4. 
   
5. <script>
   & i1 t& M7 y8 T0 S& W2 b
6. var Child = {
   
7.   template: '<h1>自定义组件!</h1>'
   * e# b: A% s! S) u
8. }
   ! l; Y6 q% n; w# u0 f9 y2 p
9. 
   - _/ C9 ?- w) N6 Z4 G. U
10. // 创建根实例
    7 _( }# }9 j/ w- _' P& D
11. new Vue({
    - v$ k! Q/ b; |3 x6 [, A
12.   el: '#app',
    ! U. X) H0 V$ H
13.   components: {
    ; E& n5 @1 V% I# O$ ]& `( g: l
14.     // <runoob> 将只在父模板可用
    
15.     'runoob': Child
    3 O6 E' h7 n' {0 m( N
16.   }
    - R1 x; H, o! x
17. })
    0 W- J2 o! Q0 K3 n. E. a  z
18. </script>

复制代码

Prop

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

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

Prop 实例

1. <div id="app">
   
2.     <child message="hello!"></child>
   
3. </div>
   
4. 
   8 ~; ?  Y+ P' t3 M- W8 e# A: ?: W
5. <script>
   
6. // 注册
   % }5 N3 @3 h$ e
7. Vue.component('child', {
   ( ?4 `# u4 F% y9 r7 V( O
8.   // 声明 props
   0 x7 s3 N" X7 [( q" \2 ~
9.   props: ['message'],
   , P8 @$ a8 k. D2 \% E
10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    + K( t" i  B( w
11.   template: '<span>{{ message }}</span>'
    
12. })
    
13. // 创建根实例
    % a9 F8 Y! D# |. _
14. new Vue({
    
15.   el: '#app'
    
16. })
    
17. </script>

复制代码

动态 Prop

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

Prop 实例

1. <div id="app">
     Q! l- s% Y# k( \" k0 b
2.     <div>
   
3.       <input v-model="parentMsg">
   
4.       <br>
   
5.       <child v-bind:message="parentMsg"></child>
   4 ]2 H  S: e. O, \" x* ~
6.     </div>
   
7. </div>
   0 L0 V4 }* W9 F8 a
8. 
   
9. <script>
   9 R* D- y5 L7 \) g
10. // 注册
    0 N) d/ H# L; c# U( e$ D- M; S
11. Vue.component('child', {
    
12.   // 声明 props
    . j1 {+ ~: Z& [
13.   props: ['message'],
    
14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
    ) l6 N7 D& t# x" j: v
15.   template: '<span>{{ message }}</span>'
    " C; l" {0 P* [, ~& I$ l
16. })
    
17. // 创建根实例
    & i0 A! V; l; v. G* @  `
18. new Vue({
    ; f  C8 F( r3 \" V
19.   el: '#app',
    " o6 V0 t$ _; m+ ^' x. {
20.   data: {
    + N2 _# o3 z5 B' J4 ], {. I
21.     parentMsg: '父组件内容'
    4 ?6 p6 F; G5 }/ ?
22.   }
    5 ?0 c# `. M  k+ Y  U! w+ l' X
23. })
    + m# o' E/ a+ Y! L& I/ t& z
24. </script>

复制代码

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

Prop 实例
; ]) |: f9 N0 m' T4 n

1. <div id="app">
   
2.     <ol>
   
3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   
4.       </ol>
   9 v7 R9 I* V( n7 S. x
5. </div>
   , e4 j. s1 N5 ]$ c& |0 m1 n
6. 
   . Q0 d) k! O  E  _4 a$ M+ Y* G
7. <script>
   
8. Vue.component('todo-item', {
   ; H- R  a6 x2 a) C/ M& u
9.   props: ['todo'],
     m& x% q/ b0 D; N2 _, c0 _; w$ K
10.   template: '<li>{{ todo.text }}</li>'
    - p0 _8 u" G. Q( F
11. })
    
12. new Vue({
    
13.   el: '#app',
    # X4 X2 p( }& W) R- n6 w
14.   data: {
    
15.     sites: [
    
16.       { text: 'Runoob' },
    
17.       { text: 'Google' },
    
18.       { text: 'Taobao' }
    
19.     ]
    
20.   }
    
21. })
    
22. </script>

复制代码

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

Prop 验证

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

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

1. Vue.component('example', {
   
2.   props: {
   ! X  D+ g/ W9 q% }: s- }. W- a
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   
4.     propA: Number,
   - o1 ^( w3 w2 `& L) g
5.     // 多种类型
   
6.     propB: [String, Number],
   
7.     // 必传且是字符串
   
8.     propC: {
   
9.       type: String,
   
10.       required: true
    7 G% t; r- N! ^: I
11.     },
    
12.     // 数字，有默认值
    + w: r" [8 u8 d4 D' E2 }% n
13.     propD: {
    
14.       type: Number,
    6 D& @+ ^: G/ V0 @
15.       default: 100
    ! a+ e# w/ a' z& J* \0 ~
16.     },
      F% l; k( h) y& [& Y" K+ a: t
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    
19.       type: Object,
    * k" U+ Q& J5 q; ?
20.       default: function () {
    & e1 t7 R+ {+ l
21.         return { message: 'hello' }
    
22.       }
    
23.     },
    : r6 w1 R. }8 A+ ]4 X
24.     // 自定义验证函数
    
25.     propF: {
    
26.       validator: function (value) {
    
27.         return value > 10
    
28.       }
    % b3 w) W9 {# I+ S
29.     }
    3 M1 z3 m7 F0 D4 ~% c9 |
30.   }
    
31. })

复制代码

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

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

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

---

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  

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

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

实例
  B4 S, u4 t! p, h" z  M# a

1. <div id="app">
   * m0 A( [$ W) c, ^: O+ R
2.     <div id="counter-event-example">
   0 w2 I; w* Y6 G/ F* Q
3.       <p>{{ total }}</p>
     f) c" _5 p9 |
4.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
5.       <button-counter v-on:increment="incrementTotal"></button-counter>
   
6.     </div>
   
7. </div>
   5 e- V, _; ?6 _
8. 
   : r: e+ v  O* Y" ~* [
9. <script>
   & {8 ~7 b: L* h# t( `* l% i
10. Vue.component('button-counter', {
    & a% T0 g1 e# q( z" u5 [) l2 z
11.   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
    3 W( a! G" Z4 A( P8 B' T
12.   data: function () {
    
13.     return {
    
14.       counter: 0
    
15.     }
    / p3 b! D' u! f) Z
16.   },
    3 H' p6 j; ~. Y7 C& l$ ^; I2 K
17.   methods: {
    * o3 }: q! T) H  \! D
18.     incrementHandler: function () {
    
19.       this.counter += 1
    
20.       this.$emit('increment')
    4 U+ j+ T( s+ E2 C9 R! @' ?: b
21.     }
      }  \; U  `/ f( h, ^, b& d  S
22.   },
    
23. })
    
24. new Vue({
    
25.   el: '#counter-event-example',
    5 N8 Q0 a  z  m0 [0 G" B* U9 P! G
26.   data: {
    
27.     total: 0
    ) ~7 @8 L/ [& n5 _
28.   },
    8 X# o2 w  o5 V+ \' J$ W
29.   methods: {
    
30.     incrementTotal: function () {
    
31.       this.total += 1
    & j0 [% {+ m9 J8 P& E: _
32.     }
    
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'],
   * w3 Y3 ^9 v: ^/ n7 ?& d- B
5.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
   
6.   template: '<span>{{ message }}</span>'
   
7. })
   # O, l: e; `/ d; j6 ~& r
8. // 创建根实例
   
9. new Vue({
   ( T$ y' P* W$ t8 ]! `1 d
10.   el: '#app',
    , O3 A& m" ]* ]4 v! f
11.   data:{
    # K: B5 P/ ^% u) P) M2 k: X' `7 F
12.     message:"hello",
    2 Q! a9 g6 J3 l+ `; r2 r1 F
13.   }
    
14. })

复制代码

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

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

1. methods: {
   
2.     incrementHandler: function (v) {
   
3.         if(v==1){
   : V  N( ~8 ^- j. E
4.             this.counter -= 1
   3 _0 p. I0 v8 u& I3 n" l$ G
5.             this.$emit('increment',[1])
   5 H0 V. v. E" L) H9 u! _. h
6.         }else{
   
7.             this.counter += 1
   + M3 [) b+ y- _5 H1 l
8.             this.$emit('increment',[2])
   * }+ H! O4 J7 p# S: Z
9.         }
   
10.     }
    
11. }

复制代码

---

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

Powered by Discuz! X3.2