Tabla de contenido
Introducción
mixins (mezclados), la descripción oficial es una forma muy flexible de ==distribuir funciones reutilizables en Vue==componentes, mixins es un objeto js, que puede contener cualquier opción de función en el elemento de secuencia de comandos de nuestro componente, como datos, componentes, métodos, creados, calculados, etc. Solo necesitamos pasar la función común a la opción mixins en forma de objeto. Cuando el componente usa el objeto mixins, todas las opciones del objeto mixins se mezclarán con las opciones del componente en sí, lo que puede mejorar la reutilización. del código y hacer que usted El código se mantenga limpio y fácil de mantener.
¿Cuándo utilizar Mixins?
Cuando tenemos datos o funciones en múltiples componentes que son muy similares, podemos usar mixins para extraer las partes comunes. A través de las funciones encapsuladas por mixins, los componentes que las llaman no cambiarán el exterior del alcance de la función.
¿Cómo crear Mixins?
Cree una carpeta mixins en el directorio src y cree un nuevo archivo myMixins.js en la carpeta. Dijimos anteriormente que mixins es un objeto js, por lo que myMixins debe definirse en forma de objeto. En el objeto, podemos definir nuestros datos, componentes, métodos, atributos creados, calculados y otros de la misma manera que el componente vue. y exportarlo a través del objeto de exportación
Usando mezclas
Introduzca el archivo myMixins.js en el componente que debe llamarse y luego importe el objeto que necesita en la exportación predeterminada
<template>
<div class="home">数据{
{
age }}</div>
</template>
<script>
import {
myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
mounted() {
this.age++;
},
methods: {
},
};
</script>
resultado:
Mixins explica el enlace en detalle.
Ejemplo: antecedentes comerciales: los datos entrantes son un número y el número debe convertirse a los caracteres chinos requeridos en lotes
Las ranuras se utilizan en la tabla de elementos (se introduce el método escrito por mixins)
<el-table-column
align="center"
:show-overflow-tooltip="true"
label="表格类目"
>
<template slot-scope="scope">
<span>{
{
auditState(scope.row.数据) }}</span>
</template>
</el-table-column>
Archivo mixins empaquetado
export const myMixins = {
components: {
},
data() {
return {
}
},
methods: {
auditState(id) {
let str = "";
if (id == "01") {
str = "待审核";
}
if (id == "02") {
str = "审核中";
}
if (id == "03") {
str = "审核通过";
}
if (id == "04") {
str = "审核不通过";
}
return str;
}
}
}
utilizado en el componente
import {
myMixins } from "@/myMixin/myMixins.js";
export default {
mixins: [myMixins],
mounted() {
//挂载后
this.auditState();//调用,这里调用不用写形参,引入的方法中写了形参
},
}
convertirse cuando el número entrante sea 01
La diferencia entre Vue.use y Vue.prototype.xxx, el archivo de referencia global de Vue.component()
- Vue.component
注册全局组件realiza el registro del componente público .vue en el archivo main.js - Vue.use
注册全局插件se usa a menudo en varios archivos de configuración para registrar componentes introducidos por paquetes npm, como Vue.use(ElementUI); - Vue.prototype.$xxx
通过在vue原型上定义它们使其在每个 Vue 的实例中可用, que es para registrar el archivo .js
La diferencia entre los archivos js de referencia global de Vue.use y Vue.prototype.xxx
La diferencia entre el registro de Vue.use () y el registro de Vue.component () en el marco de vue
La diferencia entre requerimiento modular e importación
Montar archivos js globalmente
El uso de vue.use es: cuando el método de instalación está escrito en el complemento al que se hace referencia, el método de llamada llama directamente al método de instalación, como Vue.use (VueRouter), Vue.use (ElementUI),
El uso de vue.prototype es: no hay instalación en el complemento al que se hace referencia y se utiliza la interfaz de llamada de objeto expuesta a través de exportdefault, como vue.prottype.axios=axios
Generalmente, los complementos relativamente grandes, como la interfaz de usuario, suelen importarse bajo demanda.
Montar globalmente el js encapsulado
import*as Plugin from './plugin.js';
Vue.prototype.$Plugin = Plugin;
Utilice el método js globalmente en la página.
this.$Plugin.plug2()
Vue presenta js externos
1.exportar
Crea un nuevo archivo js
usar
<script>
import {
transition } from "@/assets/js/extern"; //方法主要解构使用
export default {
created() {
this.a();
},
methods: {
a() {
transition(2);
},
},
};
</script>
Cuando hay varios métodos js
2.exportar por defecto
import sz from "@/assets/sz";//不用解构
console.log(sz);
variable de exportación 3 js
例如: a.js 导出默认模块
let data;
data = 1;
export default data
导入(不用解构)
import data from "./a.js"
Exportación e importación regulares
1, debe tener el formato {}
2, debe coincidir con {} al importar
例如: a.js 导出
let data;
data = 1;
export {
data };
导入
import {
data } from "./a.js"
Hay otra forma de escribir.
例如: a.js 导出
export let data;
data = 1;
导入
import {
data } from "./a.js"
Montar el estilo CSS global.
Cree un nuevo archivo de estilo con el sufijo .css
y móntelo globalmente
en main.js
import "./assets/css/index.css"
Utilice etiquetas directamente en la página
<div class="cool">颜色</div>