visão geral
Antes de estudar este artigo, precisamos descobrir o que é um plug-in? Um plug-in é na verdade um programa de extensão cujo objetivo principal é estender funções. Assim como os plug-ins da família Idea e da família VSCode, eles também são programas de extensão. Depois de instalá-los no IDE, você pode usar as funções implementadas nos plug-ins. O mesmo vale para os plug-ins em Vue. Através de plug-ins, podemos estender as funções e funções dos componentes Vue. Variáveis, e tornar o código mais manutenível e extensível. A seguir, vamos ver como os plugins do Vue são definidos e utilizados.
Exemplo de análise
A definição e utilização dos plugins Vue são muito simples, os passos são os seguintes:
1. Defina o plug-in
const myPlugin = {
install(app,options){
app.provide('name','walt zhong'); // 提供一个全局的变量
console.log(app,options);
app.mixin({
mounted(){
console.log('mixin');
}
});
// 对Vue底层做扩展,扩展了一个全局属性
app.config.globalProperties.$sayHello = 'hello world';
}
}
O Vue usa o método install(app, options) ao definir plugins. O primeiro parâmetro é a instância do aplicativo do Vue, e o segundo parâmetro pode ser usado para ler os parâmetros que passamos. No código acima, estendemos uma variável global e o bloco mixin do Vue (mixin), e também estendemos um atributo global para a camada inferior do Vue.
Vue的mixin混入块也是一种对程序做扩展的方法，这里不多介绍，混入的方式扩展会让代码的可读性降低，并且项目越大越难维护。一般都是和插件搭配使用，因为插件的可读性和可维护性比较好
2. Usando plug-ins
Ao usar um plugin, usamos a instância Vue app.use(plugin name, parameter), o código é o seguinte:
app.use(myPlugin,{
name1:'walt'});
Então podemos usar a variável expandida em nosso plugin
app.component('my-title',{
inject:['name'],
mounted(){
console.log(this.$sayHello);
},
template: `<div>{
{
name}}</div>`
});
No código acima, definimos um
my-titlecomponente nomeado, neste momento podemos usar a palavra-chave inject para obter a variável name que definimos no plug-in, não precisamos chamar a sintaxe mista diretamente, porque mixin é originalmente um Vue instance Um atributo, então quando chamamosapp.use()o método, o método relacionado no bloco de sintaxe mixin será chamado no momento certo. Nossos atributos globais estendidos precisam ser chamados de uma forma, comothis.$xxxxneste exemplothis.$sayHello
3. Exibição de exemplo
1. A caixa de entrada foca automaticamente
Nos capítulos anteriores, implementamos o caso de foco automático da caixa de entrada. O foco automático da caixa de entrada é realizado usando as instruções personalizadas do Vue. Aqui combinamos o plug-in para atender a esse requisito. código mostra como abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入框自动聚焦</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const myPlugin = {
install(app,options){
app.provide('inputName','输入框名称'); // 提供输入框的名称全局变量
app.directive('focus',{
mounted(el){
el.focus();
}
});
}
}
const app = Vue.createApp({
template:
`
<my-focus-input />
`
});
app.component('my-focus-input',{
inject:['inputName'],
template: `<div>{
{
inputName}} <input v-focus/></div>`
});
app.use(myPlugin);
const vm = app.mount('#root');
</script>
resultado da operação:
2. Verificação de dados personalizados
Neste caso, usamos a sintaxe do plug-in e do mixin para implementar uma função de verificação para verificar nosso nome e idade. Se a idade for maior que 25 anos, a saída é muito antiga, caso contrário, a saída é muito jovem. Se o comprimento do nome é maior que 4, produzimos normalmente, caso contrário, o nome da saída é muito curto. código mostra como abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用插件做数据校验</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const validatorPlugin=(app,options)=>{
app.mixin({
created(){
console.log('mixin ready');
console.log(this.$options.rules);
for(let key in this.$options.rules){
const item = this.$options.rules[key];
console.log(this);
this.$watch(key,(value)=>{
console.log("old: "+key + " ,new: " + value);
const result = item.validate(value);
if(!result){
console.log(item.message);
}
});
console.log(key,item);
}
}
});
}
const app = Vue.createApp({
data(){
return{
name:'walt',age:28
}
},
rules:{
age:{
validate:(age)=>{
return age > 25},
message:'too young'
},
name:{
validate:name=> name.length>=4,
message:'name too short'
}
},
template:
`
<div>name: {
{
name}},age:{
{
age}}</div>
`
});
app.use(validatorPlugin);
const vm = app.mount('#root');
</script>
Resultados da execução:
# Resumo
Este artigo apresenta principalmente a definição e o uso de plug-ins. O uso de plug-ins pode tornar nosso código mais escalável e legível. O uso correto de plug-ins pode nos ajudar a escrever um código muito elegante. Leitores são recomendados a seguir Implemente os dois exemplos acima à mão e compreenda profundamente o uso do plug-in e sua beleza.