1. Escenarios de aplicación
En muchos casos, el desarrollo de proyectos de Vue requiere un control dinámico de los componentes personalizados que desarrollamos para lograr el renderizado de acuerdo con los componentes que queremos y, al mismo tiempo, podemos gestionar dinámicamente el renderizado y la visualización de componentes personalizados en el front-end.
¿Así que cómo?
2. Realización
1. Principio
Vue.extend(): Cree una "subclase" usando el constructor base de Vue. El argumento es un objeto que contiene opciones para el componente.
En pocas palabras, podemos usar el método Vue.extend() para crear un componente de la nada en la plantilla de plantilla, el efecto es similar a agregar y generar elementos DOM en JQuery o es6 (js).
2. Date cuenta
var tipComponent = Vue.extend({
render: (h) =>
h(Assembly, {
props: {
Transfer_data:Tvalue
}, //组件传值
}),
}); //生成组件的dom
const component = new tipComponent().$mount();
var DomContent = component.$el; //将vue结构转化成dom
document.getElementById(Id).appendChild(DomContent);
3. Uso del paquete
1. Instala este proyecto
npm i js-dynamic-components
2. Usa este proyecto
// 在您的vue组件当中导入npm包
import {
Dynamically_insert_components} from 'js-dynamic-components'
// 使用本项目 示例如下 直接调用该方法
Dynamically_insert_components(Assembly,Tvalue,Id)
3. Ejemplos
// 例如 自注册，或者全局注册的自定义组件
import com2 from './Home'
export default {
components: {
com2
},
data() {
return {
data:'数据传值测试1'
};
},
mounted() {
this.ss()
},
methods: {
ss(){
Dynamically_insert_components(com1,this.data,"a1")
}
},
};
4. Descripción del parámetro
| parámetro | Descripción de parámetros |
|---|---|
| Aviso | Antes de usar js-dynamic-components, debe realizar una operación de inicialización de npm i en su propio proyecto de desarrollo (debido a que se implementa el método de extensión basado en Vue, debe restaurar e instalar Vue) |
| Asamblea | Personalice el nombre del componente, solo impórtelo |
| Valor T | props pasa valor, cadena, matriz, se puede pasar objeto, subcomponente props pasa valor parámetro Transfer_data |
| Identificación | La identificación del DOM que debe agregarse al componente personalizado vue, la cadena se pasa, "id" |
Este artículo es original y no es fácil serlo. Si necesita reimprimirlo, comuníquese con el autor para obtener autorización.