标签：使用 this 逻辑 赋值 hid code const rom 实例
demo: index.vue, feiMixins,feiExtends,feiClass 四个文件
index.vue
<template> <div id="index"> <div>{{foo}}</div> <div>{{bar}} ___ {{bar2}}</div> <div>{{hello}}</div> <div>{{daFei.setName("WEB")}} __赋值</div> <div>{{daFei}}</div> <!-- { "name": "WEB", "age": 18 } --> <div>{{daFei.name}}</div> <!-- WEB --> <!-- 01) extends是创建一个子类，最终返回一个vue实例。一般在单独用js书写组件的时候使用。 02) 而mixins选项是指定要混入的代码片段，vue代码中的script部分。 混入则可认为是vue版本的全局方法库，而且不怎么影响现有vue逻辑的一个特殊处理方式。通常用 在业务逻辑相似但又不同的兄弟组件之间 --> </div> </template> <script> import {feiMixins, mixins2} from "./feiMixins.js" // mixins import {feiExtends} from "./feiExtends.js" // extends import {feiClass} from "./feiClass.js" // class export default { name: "index", components:{}, mixins: [feiMixins,mixins2], extends: feiExtends, data() { return { foo: "foo_01", daFei: new feiClass() } } } </script> <style scoped> </style>
feiMixins.js
export const feiMixins = { name: "xxx", data() { return { bar: "bar_mixins" } } }; export const mixins2 = { name: "xxx", data() { return { bar2: "bar_002" } } };
feiExtends.js
export const feiExtends = { name: "xxx", data() { return { hello: "hello_extends" } } };
feiClass.js
export class feiClass { constructor() { this.name = "fei"; this.age = 18; } setName(name) { this.name = name; } }
标签：使用 this 逻辑 赋值 hid code const rom 实例
原文地址：https://www.cnblogs.com/dafei4/p/14228032.html
