File tree Expand file tree Collapse file tree 1 file changed +30
-2
lines changed Expand file tree Collapse file tree 1 file changed +30
-2
lines changed Original file line number Diff line number Diff line change 1
1
---
2
2
title : ミックスイン
3
- updated : 2017-09-03
3
+ updated : 2018-01-30
4
4
type : guide
5
5
order : 301
6
6
---
@@ -34,8 +34,36 @@ var component = new Component() // => "hello from mixin!"
34
34
35
35
## オプションのマージ
36
36
37
- ミックスインとコンポーネントそれ自身がオプションと重複するとき、それらは適切なストラテジを使用して"マージ"されます。例えば、同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。加えて、ミックスインのフックはコンポーネント自身のフック ** 前 ** に呼ばれます:
37
+ ミックスインとコンポーネントそれ自身がオプションと重複するとき、それらは適切なストラテジを使用して"マージ"されます。
38
38
39
+ 例えば、データオブジェクトはシャローマージ(1層のプロパティ)され、コンフリクトした場合にはコンポーネントのデータが優先されます。
40
+
41
+ ``` js
42
+ var mixin = {
43
+ data : function () {
44
+ return {
45
+ message: ' hello' ,
46
+ foo: ' abc'
47
+ }
48
+ }
49
+ }
50
+
51
+ new Vue ({
52
+ mixins: [mixin],
53
+ data : function () {
54
+ return {
55
+ message: ' goodbye' ,
56
+ bar: ' def'
57
+ }
58
+ },
59
+ created : function () {
60
+ console .log (this .$data )
61
+ // => { message: "goodbye", foo: "abc", bar: "def" }
62
+ }
63
+ })
64
+ ```
65
+
66
+ 同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。ミックスインのフックはコンポーネント自身のフック** 前** に呼ばれます。
39
67
40
68
``` js
41
69
var mixin = {
You can’t perform that action at this time.
0 commit comments