组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 注册一个全局组件语法格式如下: - Vue.component(tagName, options)
复制代码tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件: 全局组件所有实例都能用全局组件。 全局组件实例注册一个简单的全局组件 runoob,并使用它: ; r& u9 @* [" k+ f$ J4 T
- <div id="app">/ N# M7 F1 b4 Y/ u# f& g
- <runoob></runoob>; H) V8 I, \( M' E; q; S
- </div>
# I6 D0 `5 j, B1 A1 t* {1 l -
9 j5 S% R2 k5 T ?) h$ ^ - <script>
" A8 o* E" h- b# g: e3 Y - // 注册
4 t& L" }: L$ r [7 u" h - Vue.component('runoob', { X, ~1 n2 _- s, u
- template: '<h1>自定义组件!</h1>'% s& Y; J% T C/ a
- })
y* U/ W4 f2 V3 Z" q/ U' p - // 创建根实例, q& a" i: g7 K$ N- r3 C% Z5 ~
- new Vue({1 s G+ K; M, N; @0 u' P
- el: '#app'. n6 N2 X4 o2 s1 U, K
- })
6 W4 ^$ m( y/ I( V# I! I2 x - </script>
复制代码 局部组件我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用: 局部组件实例注册一个简单的局部组件 runoob,并使用它: 8 `7 }, q+ I2 |; ]
- <div id="app">6 T8 b' Q5 h G. g; o m4 V* L3 ?7 H" T
- <runoob></runoob>
! h5 w# g( Y& z* T; B M0 X0 Q - </div>8 Z9 v6 g, m- |7 S- J
-
* W: y, d" _- K! J, t - <script>" X) ]) P( Z' C5 h
- var Child = {
" {+ X3 q4 p8 e - template: '<h1>自定义组件!</h1>'
8 i }! p" k% c7 {) W7 Q$ Q6 h - }* Z" c' v* E( z9 `3 Y
-
! V: e: i Z4 A* k# N - // 创建根实例/ T5 v" P& `- z6 W' W
- new Vue({
& U" F3 K( r- i5 \" s' F- V - el: '#app',+ R+ h% \5 \! X. f6 g6 ?3 h2 T2 K
- components: {
: D1 u% s( O# J1 G6 N6 {% j - // <runoob> 将只在父模板可用+ r6 z. h) x) h, ~- G: w
- 'runoob': Child* C% U( D! N% X+ E/ _# g
- }' W6 q* ]" Z& e
- })! P* |3 B- V0 k4 n
- </script>
复制代码 Propprop 是父组件用来传递数据的一个自定义属性。 父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop": Prop 实例1 b4 z' x5 {/ d- o3 B' W( `
- <div id="app">6 R8 ~- ]0 {5 M# i- U( B$ D
- <child message="hello!"></child>
1 q- T* [( q; D - </div>+ f* ~, z; g( i9 z+ b" p
-
3 c9 q$ h. H/ H5 J: ~ - <script>1 T8 {" ~5 J% b! N9 s
- // 注册+ x* `5 E' L, X2 [" T
- Vue.component('child', {
* G- W; D! d4 J/ |8 j5 p2 h - // 声明 props" {: q0 q( E8 [" v# r- Q! v
- props: ['message'],
8 M6 i9 W4 t9 d9 Y( Y - // 同样也可以在 vm 实例中像 "this.message" 这样使用
4 J5 O' }( ~% T3 G' p1 R7 y - template: '<span>{{ message }}</span>'8 a5 { J0 {" B: d$ E1 G
- })9 H& n6 ^* v& v1 y
- // 创建根实例
5 j$ R' \, O8 c5 b( n+ n - new Vue({# `2 q/ I! t& C0 ~8 s
- el: '#app'
* k7 a! \/ } b1 W - })* k3 ^: ^, a. T" @$ L% y
- </script>
复制代码 动态 Prop类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件: Prop 实例
' {. H; ?1 |1 A- Y+ F% y2 x$ e- <div id="app">5 g) {+ O( |4 f! \
- <div>
. ^9 w, S; E: O; u4 f - <input v-model="parentMsg">
& Y1 ]$ Q+ E/ {1 D8 @: w - <br>
9 w( K% e- q: E/ D! _ - <child v-bind:message="parentMsg"></child>
% y0 c. c, K" a' S& V8 h9 I - </div>; O5 ~' w$ P. o4 z3 C) \0 s
- </div>
f6 H+ C$ @& G/ i2 N -
) K" C& o# O1 }- n - <script>" h/ p+ R" C+ j" D. w0 W9 x$ H( o2 u
- // 注册
( ~% g4 f2 S8 ?) s- W+ w - Vue.component('child', {; C8 y/ ^' ?' U/ h
- // 声明 props
. z" c8 q! `# o9 f! ]- ~ - props: ['message'], f1 T6 c4 P# v; K2 ` h( |% P
- // 同样也可以在 vm 实例中像 "this.message" 这样使用
+ _6 W b# D- h - template: '<span>{{ message }}</span>'
; r/ ?- {+ R3 e4 d' X - })
8 F" p. ~# x- q# p* F, y( p - // 创建根实例
+ T9 x: x" ], @4 k - new Vue({
i* D" N8 n1 B - el: '#app',0 |* }, i _( d# V
- data: {
J& V) ]% B5 T$ m; {. H - parentMsg: '父组件内容'2 ?3 \( D9 g4 b2 q9 I. w: f4 Y
- }
; ]4 i, i7 H3 u& m; D( t - })
, W, J+ c- A- \3 K - </script>
复制代码以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中: Prop 实例' q* D( M) ]" O+ l' q. a
- <div id="app">4 C. F' ^2 I0 [/ j
- <ol>
& x* C @0 }% b8 k. | - <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>6 T3 E7 B5 h% ^2 s) `
- </ol>
5 Q& h3 D1 E# F+ T - </div>0 R6 g! z/ u5 i3 n X
-
/ q: G# {1 v. H& w3 s+ J - <script>7 G) o1 \ P5 T5 u
- Vue.component('todo-item', {
# ?8 g8 {: r) e3 |2 u, w0 p6 S# A - props: ['todo'],
9 h1 f. x" {1 ?$ G; S& U - template: '<li>{{ todo.text }}</li>'8 k1 c V* C/ v8 M: q
- })
& H+ m7 n+ ]' N; [6 i& N0 S7 h - new Vue({
5 j. \+ h% v. t - el: '#app',( k8 {) V2 x5 \/ ~! H
- data: {/ H" y( F$ ~8 K4 N: G
- sites: [
- \4 p: Y+ M. n" m1 \* c - { text: 'Runoob' },: y! I5 W! C! |: L2 A+ a1 g5 }
- { text: 'Google' },7 ]4 Q, F9 z9 ~) Y0 ~0 v# w% w3 b6 O
- { text: 'Taobao' }8 P- F9 r* m/ f) Q. w7 `) V
- ]
- w3 @1 C2 L0 ]9 ] - }
2 X k) {3 p- w0 p5 @9 p - })
# V: D1 j# g7 J! ` - </script>
复制代码注意: prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。 Prop 验证组件可以为 props 指定验证要求。 prop 是一个对象而不是字符串数组时,它包含验证要求: - Vue.component('example', {
0 c% }& v% w5 E! o4 E; B - props: {
; ]8 z- Q) u2 O h. U! r - // 基础类型检测 (`null` 意思是任何类型都可以)' y# e( g, s1 c% z4 T
- propA: Number,& T. Q. X; M( l& F/ |6 q3 |
- // 多种类型4 H- K5 N+ d, Z+ b* L
- propB: [String, Number],- H: y2 j& o N# c
- // 必传且是字符串
% O: z- B, L0 v - propC: {" k0 \' A- U, R7 X' |
- type: String,% P. k, D3 d# b; O
- required: true$ Q8 x# ?1 Q7 Y3 T8 O% x; W x
- },
- a1 m& a, v. d4 v& A, c- c - // 数字,有默认值+ N3 h1 _$ ^! S- E% J
- propD: {
9 H# j5 @. D( G/ F' ~, h - type: Number,* U9 [6 a4 F# O& Z5 Z4 J
- default: 100& K, a1 m3 z1 c5 }* g7 \' x3 {
- },
8 B* _; @, S4 Y" r6 i - // 数组/对象的默认值应当由一个工厂函数返回
1 u' i( j0 r" c' ?! W - propE: {
1 ^8 D0 o5 }4 s - type: Object, N+ u6 S! \, H, x$ V5 P! x7 t
- default: function () {
) {8 _0 N/ u% a" x4 l; U2 E# R - return { message: 'hello' }5 ?" p7 e' a6 R% [- q1 M
- }
8 e. |7 h) X6 K, h! B - },
, G+ T) ^9 ?9 K4 S- ^ - // 自定义验证函数/ r& { {6 `) O
- propF: {
8 y' i+ `; a+ c6 k5 b# _ - validator: function (value) {
1 \) d0 Z ^- Z" A9 D7 I3 D) [ - return value > 10# k$ G+ ^/ h* d& U
- }
, r) N. n' h# [3 O% P2 n - }1 C7 b, n4 s3 ^$ v& _( C" R
- } E! j2 {% c) N' f# \
- })
复制代码type 可以是下面原生构造器: - String
- Number
- Boolean
- Function
- Object
- Array
* }( k+ F$ k9 W$ v/ u9 H( n, @0 h! T
type 也可以是一个自定义构造器,使用 instanceof 检测。 自定义事件父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即: - 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
' ?2 h) S4 \$ k5 P# _
另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。 实例7 P) I5 O+ I2 m6 X5 a" x
- <div id="app">: K, ]* P" L- _& X# o
- <div id="counter-event-example">
+ U; {$ s, m! P4 Q) f - <p>{{ total }}</p>
% f" h# n4 l, C& b. l, Y2 G: z' [ - <button-counter v-on:increment="incrementTotal"></button-counter>
( ? w3 Y+ M& r/ |) P- E - <button-counter v-on:increment="incrementTotal"></button-counter>
* b F5 ~% T- j4 }, j) A - </div>7 z1 b; e( I2 B0 \( E7 ~
- </div>
0 }, c7 i$ j" U/ B5 k# \# D- _ - 7 ?* n' e9 I! B' d
- <script>5 c3 k. f# P* u( P& Z
- Vue.component('button-counter', {
! j( h7 ^( z3 @% V6 n4 k9 d3 ~; h - template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
9 w1 a Q$ P K4 V7 J6 ^! Y9 W# { j - data: function () {! i9 G6 b4 \, z
- return {
+ N. |4 e4 n8 G. a) m - counter: 0
+ f4 ^; N( _/ `% O Q6 j+ B - }
# U, {! v$ p& C& S- |/ i - },
& i# h& {$ h0 z* J) p% G - methods: {
/ F3 g- S0 T5 Y& T C# K - incrementHandler: function () {! m8 U- G1 m" x x
- this.counter += 1
1 n6 ~/ ?3 u+ R% v( ` - this.$emit('increment')5 [+ }( M: ]( p! q s) M
- }4 D3 k7 k7 s r9 q9 [7 {3 s9 z
- },9 t O* F+ ~ d$ U( F& l
- })& k' Z1 h. k( }7 }5 j: u, C
- new Vue({
C; ?8 e/ I5 b - el: '#counter-event-example', N8 X. D7 I2 L! ?: D
- data: {* D2 {7 ~& i5 b- P9 v! U
- total: 0
6 v. N3 O1 h% i/ W8 g/ A3 b% d3 J - },
! M7 k; p# z4 r7 s. m. Q - methods: { m. J# {( b& a6 @# q
- incrementTotal: function () {5 u" ^4 H7 ^+ _/ ^
- this.total += 1 m4 e8 w2 ^9 |! c
- }
( c$ g: U1 h9 S) a2 `7 C0 h7 B - }8 i% F1 [# g0 }$ K8 j$ y
- })
# Y0 {/ z; W2 X# W# U) G5 y - </script>
复制代码如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如: - <my-component v-on:click.native="doTheThing"></my-component>
复制代码父组件给子组件传值的时候,如果想传入一个变量,写法如下: - // 注册
0 R( q/ W/ { i1 A* E - Vue.component('child', {) w8 x( G, k6 R- A! v& j
- // 声明 props
- F l0 K# S$ K/ `! p - props: ['message'],
$ [! F6 M5 R5 M1 v - // 同样也可以在 vm 实例中像 "this.message" 这样使用
+ M7 [6 Z# h0 `) [3 c# n+ k - template: '<span>{{ message }}</span>'
, v1 \8 M% v* V6 C* x - })
! m% B( w; b1 A7 |& c - // 创建根实例8 a: R [3 R& C9 W. w2 n" W
- new Vue({
7 R; W7 K; r# V0 n; o - el: '#app',0 w% p# r1 C, B8 H; h0 x
- data:{
% y+ E$ Q# b8 r2 r - message:"hello",
3 t, r5 B, V% L O4 |. ] - }) y' ]- J" m5 z& d' f: G+ a# H
- })
复制代码子组件通过 $emit 触发父组件的方法时,如果需要传递参数,可在方法名后面加参数数组。 比如 $emit("FunctionName") 当要传递参数时 :$emit("FunctionName",[arg1,arg2...])。 - methods: {, m* u. q; P2 w6 D) w _7 m' ?
- incrementHandler: function (v) {
: e9 l6 ^9 j% S" x. r9 y0 R - if(v==1){' D( r/ ]" H" Z! ^& x' `- b' X' e W
- this.counter -= 1% ^5 C) J9 i+ X- l
- this.$emit('increment',[1])2 Y7 R, b1 q0 [: C( V* H1 P
- }else{
: G1 j& ~2 s$ _( s/ ~ - this.counter += 14 g" {6 }2 B' z) Q# W/ d6 H, Q; V- |
- this.$emit('increment',[2])1 L( o! z9 x/ b
- }3 [ a: V+ J* I; i/ u" R
- }" F) F6 o6 j+ y% X9 u' l1 o
- }
复制代码
$ c H2 Y) H& y+ _. d0 J8 F b* n }6 L+ A* Z/ S1 [
|