You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/mixins.md
+27-27Lines changed: 27 additions & 27 deletions
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,13 @@
1
-
# Mixins
1
+
# ミックスイン
2
2
3
-
## Basics
3
+
## 基本
4
4
5
-
Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
Hook functions with the same name are merged into an array so that all of them will be called. Mixin hooks will be called **before** the component's own hooks.
Options that expect object values, for example `methods`, `components` and `directives`, will be merged into the same object. The component's options will take priority when there are conflicting keys in these objects:
You can also apply a mixin globally for a Vue application:
115
+
Vue アプリケーションのためにグローバルにミックスインを適用することもできます:
116
116
117
117
```js
118
118
constapp=Vue.createApp({
119
119
myOption:'hello!'
120
120
})
121
121
122
-
//inject a handler for `myOption` custom option
122
+
// `myOption` カスタムオプションにハンドラを注入する
123
123
app.mixin({
124
124
created() {
125
125
constmyOption=this.$options.myOption
@@ -132,14 +132,14 @@ app.mixin({
132
132
app.mount('#mixins-global') // => "hello!"
133
133
```
134
134
135
-
Use with caution! Once you apply a mixin globally, it will affect **every**component instance created afterwards in the given app (for example, child components):
In most cases, you should only use it for custom option handling like demonstrated in the example above. It's also a good idea to ship them as [Plugins](plugins.html)to avoid duplicate application.
When custom options are merged, they use the default strategy which overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to `app.config.optionMergeStrategies`:
The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. Let's try to check what do we have in these parameters when we use a mixin:
As you can see, in the console we have `toVal`and`fromVal`printed first from the mixin and then from the `app`. We always return `fromVal`if it exists, that's why `this.$options.custom`is set to `hello!`in the end. Let's try to change a strategy to _always return a value from the child instance_:
-Mixins are conflict-prone: Since properties from each feature are merged into the same component, you still have to know about every other feature to avoid property name conflicts and for debugging.
0 commit comments