• mixins

2020-04-18 19:38:19
mixins Type: Array<Object> Details: The mixins option accepts an array of mixin objects. These mixin objects can contain instance options like normal instance objects, and they will be merged ...
mixins
Type: Array<Object>

Details:

The mixins option accepts an array of mixin objects. These mixin objects can contain instance options like normal instance objects, and they will be merged against the eventual options using the same option merging logic in Vue.extend(). e.g. If your mixin contains a created hook and the component itself also has one, both functions will be called.

Mixin hooks are called in the order they are provided, and called before the component’s own hooks.

Example:

var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin]
})
// => 1
// => 2




展开全文
• Mixins

2020-12-09 01:52:37
<div><p>Replacing PR #177</p><p>该提问来源于开源项目：javascript-tutorial/es.javascript.info</p></div>
• Designing mixins

2021-01-02 20:23:21
<ul><li>Making it clear that mixins do not create their own interface/interface prototype object, but instead cause the appropriate members to be added to the interface/interface prototype objects of ...
• PostHTML Mixins

2021-01-06 11:49:50
<p>I wrote a very dirty prototype of the plugin for support Mixins. I'd like to get feedback on Mixin syntax and look at your ideas. How do you see the syntax of Mixins in your project? <p>Very ...
• Wrapper Mixins

2020-12-28 02:47:24
<p>I propose a new form of mixins are made (Wrapper Mixins), where they would implement an interface (interface as so mixins can still extend other mixins, but it could be a class if needed) from ...
• Mixins?

2020-12-09 00:12:34
import {Component, Mixins} from 'vue-property-decorator' import DynamicNavMixin from './DynamicNav.mixin' export default class QDynamicNavItem extends Mixins(DynamicNavMixin) { } ...
• @mixins

2020-12-01 22:48:14
<div><p>Well you know there is a problem with mixins. If we use @, it creates incompatibility with css, such as , -face (solved), and so on. But, even if we find all the words we can't use for...
• Options mixins

2021-01-08 02:19:50
<div><p>starting a collection of mixins for options which have similar features, e.g. a list of subreddits</p><p>该提问来源于开源项目：honestbleeps/Reddit-Enhancement-Suite</p></div>
• Deprecate mixins

2020-11-30 03:26:18
<div><p>This PR deprecates the mixins and introduces a new API that is exposed completely via the <code>session</code> service. <p>We discussed a few options for replacing the current mixins with a ...

2020-12-09 07:42:01
m using for mixins is that they're named interface partials that can extend more than one interface with a limited set of members. ~~Not asking for a review right now, but high-level issues/...
• Conditional mixins

2021-01-02 10:50:04
It works fine in Forge, but Forge rearranges some of the Minecraft code, so the mixins need to change. It's not as simple as moving a block of code around - for example in GuiSlot, Forge moves ...
• TypeScript Mixins

2020-08-13 06:40:57
In TypeScript, we can’t inherit or extend from more than one class but Mixins helps us to get around that. 在TypeScript中，我们不能从多个类继承或扩展，但是Mixins帮助我们解决了这一问题。 Mixins ...
In TypeScript, we can’t inherit or extend from more than one class but Mixins helps us to get around that.

在TypeScript中，我们不能从一个以上的类继承或扩展，但是Mixins可以帮助我们解决这个问题。
Mixins create partial classes which we can combine to form a single class that contains all the methods and properties from the partial classes.

混入创建，我们可以结合起来，形成一个包含所有从局部类的方法和属性的单一类部分类。
Say we have two classes, Car and Lorry which contain the drive and carry methods respectively and we want to create a third class called Truck. A truck should contain both drive and carry methods but we can only extend one class in TypeScript. To solve this, we can use mixins:
假设我们有两个类， Car和Lorry ，分别包含drive和carry方法，我们想创建一个称为Truck的第三类。 卡车应同时包含drive方法和carry方法，但我们只能在TypeScript中扩展一个类。 为了解决这个问题，我们可以使用mixins：
export class Car {
drive(name:string) {
console.log(This ${name} can drive very fast); } } export class Lorry { carry(weight:number) { console.log(This vehicle can carry${weight} kg);
}
}

export class Truck extends Car,Lorry {} // error: Classes can only extend a single class
To create a mixin, we’ll take advantage of two functionalities of TypeScript:

要创建一个mixin，我们将利用TypeScript的两个功能：
Interface class extension 接口类扩展  Declaration merging 声明合并  接口类扩展 (Interface class extension)
Unlike classes, interfaces can extend multiple classes in TypeScript. When an interface extends a class, it extends only the members of the class but not their implementation because interfaces don’t contain implementations.
与类不同，接口可以在TypeScript中扩展多个类。 当接口扩展一个类时，它仅扩展该类的成员，而不扩展其实现，因为接口不包含实现。
interface A extends ClassB,ClassC {}
声明合并 (Declaration merging)
When two or more declarations are declared with the same name, TypeScript merges them into one.
当使用相同的名称声明两个或多个声明时，TypeScript会将它们合并为一个。
interface Alligator {
eyes: number;
nose: number;
}

interface Alligator {
tail: number;
}

// contains properties from both Alligator interfaces
const gator: Alligator = {
eyes: 2,
nose: 1,
tail: 1
};
By leveraging these two functionalities in TypeScript, we can create an interface with the same name as Truck and extend both the Car and Lorry classes:
通过利用TypeScript中的这两个功能，我们可以创建一个与Truck同名的interface ，并扩展Car和Lorry类：
export class Truck {}
export interface Truck extends Car, Lorry {}
Due to declaration merging, the Truck class will be merged with the Truck interface. This means that, the Truck class will now contain the function definitions from both Car and Lorry classes. Remember, just the definitions not the implementation because once again, interfaces don’t contain implementations.

由于声明合并 ， Truck 类将与Truck 接口合并。 这意味着Truck类现在将包含Car和Lorry类的函数定义。 记住，只是定义而不是实现，因为接口再一次不包含实现。
To enable the Truck class to have implementations of the functions inherited from Car and Lorry, we’ll use a helper function found in the TypeScript docs.

为了使Truck类具有从Car和Lorry继承的函数的实现，我们将使用TypeScript文档中的helper函数 。
The function takes the name of the class to which we want to copy the implementations to as the first argument, which in our case is Truck and takes an array of classes from which we want to copy the implementations as the second argument, which in our case is Car and Lorry.
该函数将要向其复制实现的类的名称作为第一个参数，在本例中为Truck ，并从一个要从其复制实现的类数组作为第二个参数，在我们的类中案件是Car和Lorry 。
// the helper function
function applyMixins(derivedCtor: any, baseCtors: any[]) {
baseCtors.forEach(baseCtor => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
});
});
}
And here’s how it’s used:
以及它的用法：
applyMixins(Truck, [Car, Lorry]);
Now, we can access the methods in Car and Lorry from a truck object.
现在，我们可以从卡车对象访问“ Car和“ Lorry的方法。
const truck = new Truck();
truck.drive("truck"); // This truck can drive very fast
truck.carry(10); // This vehicle can carry 10 kg
That’s it. Go have some mixin fun. 🎉

而已。 去享受一些mixin的乐趣。 🎉
翻译自: https://www.digitalocean.com/community/tutorials/typescript-mixins
展开全文

...