File tree Expand file tree Collapse file tree 1 file changed +30
-1
lines changed Expand file tree Collapse file tree 1 file changed +30
-1
lines changed Original file line number Diff line number Diff line change @@ -33,7 +33,36 @@ var component = new Component() // => "hello from mixin!"
33
33
34
34
## 选项合并
35
35
36
- 当组件和混合对象含有同名选项时,这些选项将以恰当的方式混合。比如,同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的 钩子将在组件自身钩子 ** 之前** 调用 :
36
+ 当组件和混合对象含有同名选项时,这些选项将以恰当的方式混合。
37
+
38
+ 比如,数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先。
39
+
40
+ ``` js
41
+ var mixin = {
42
+ data : function () {
43
+ return {
44
+ message: ' hello' ,
45
+ foo: ' abc'
46
+ }
47
+ }
48
+ }
49
+
50
+ new Vue ({
51
+ mixins: [mixin],
52
+ data : function () {
53
+ return {
54
+ message: ' goodbye' ,
55
+ bar: ' def'
56
+ }
57
+ },
58
+ created : function () {
59
+ console .log (this .$data )
60
+ // => { message: "goodbye", foo: "abc", bar: "def" }
61
+ }
62
+ })
63
+ ```
64
+
65
+ 同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子** 之前** 调用。
37
66
38
67
``` js
39
68
var mixin = {
You can’t perform that action at this time.
0 commit comments