Skip to content

Commit 41a2fb1

Browse files
re-fortkazupon
authored andcommitted
Add details of object merging to mixins page (#672)
* add details of object merging to mixins page * Update date
1 parent 7666a54 commit 41a2fb1

File tree

1 file changed

+30
-2
lines changed

1 file changed

+30
-2
lines changed

src/v2/guide/mixins.md

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: ミックスイン
3-
updated: 2017-09-03
3+
updated: 2018-01-30
44
type: guide
55
order: 301
66
---
@@ -34,8 +34,36 @@ var component = new Component() // => "hello from mixin!"
3434

3535
## オプションのマージ
3636

37-
ミックスインとコンポーネントそれ自身がオプションと重複するとき、それらは適切なストラテジを使用して"マージ"されます。例えば、同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。加えて、ミックスインのフックはコンポーネント自身のフック****に呼ばれます:
37+
ミックスインとコンポーネントそれ自身がオプションと重複するとき、それらは適切なストラテジを使用して"マージ"されます。
3838

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+
同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。ミックスインのフックはコンポーネント自身のフック****に呼ばれます。
3967

4068
``` js
4169
var mixin = {

0 commit comments

Comments
 (0)