Tabla de contenido
Prefacio
En el capítulo anterior del blog, explicamos el ciclo de vida de Vue, el filtrado de listas, las propiedades calculadas y los oyentes.
En este capítulo, hablaremos sobre el desarrollo de componentes de Vue.
1. Uso de componentes
Dos formas de crear componentes.
var Header = {
template:'模板' ,
data是一个函数,
methods:功能,
components:子组件们
}//局部声明
Vue.component('组件名',组件对象);//全局注册 等于注册加声明了
Clasificación de componentes
- Componentes comunes (como formularios, ventanas emergentes, clases de diseño, etc.) (se pueden reutilizar en múltiples proyectos)
- Componentes comerciales (lotería, clasificación de máquinas) (reutilizados en este proyecto)
- Componentes de la página (cada página de un programa de desarrollo de una sola página es un componente, solo completa funciones y no se reutiliza)
Trilogía del desarrollo de componentes : declaración, registro, uso.
Nota: Si el nombre del subcomponente tiene mayúsculas y minúsculas, sepárelo con "-" cuando utilice la etiqueta del subcomponente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,{
{
name}}
<hello></hello>
<saybyebye></saybyebye>
</div>
<template id="myhello">
<div>hello,{
{
name}}</div>
</template>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 注册了一个全局组件，名字叫hello
Vue.component('hello',{
template:`#myhello`,
data(){
return{
name:'我是hello'
}
}
})
// 定义一个局部组件
var saybyebye={
template:`<div>你好</div>`
}
var app = new Vue({
el:'#app',
data(){
return{
name:"张三",
}
},
// 注册局部组件
components:{
saybyebye
}
})
</script>
</html>
2. Ranura
La ranura es un agujero que se deja en el DOM al declarar un componente secundario, de modo que el componente principal puede insertar dinámicamente su propio contenido en el agujero cuando usa el componente secundario.
Además, se puede nombrar la ubicación del pozo, es decir, el subcomponente nombra la ubicación del pozo cuando se declara, lo que facilita que el componente principal inserte contenido en la ubicación del pozo especificada.
La ranura es un DOM dinámico
- Uso de ranuras:
- Hay dos pasos: a.Dejar agujeros en los subcomponentes. B. Cuando el componente principal utiliza el componente secundario, asigne un valor al pozo.
- Debe haber componentes padre-hijo como requisito previo.
- El objetivo es dinamizar los subcomponentes.
Ranura anónima
: la ranura anónima significa que no se declara ningún nombre al declarar y se mostrará todo el contenido.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,{
{
name}}
<hello></hello>
<saybyebye>
<div>我是插槽的内容</div>
</saybyebye>
</div>
<template id="myhello">
<div>hello,{
{
name}}</div>
</template>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 注册了一个全局组件，名字叫hello
Vue.component('hello',{
template:`#myhello`,
data(){
return{
name:'我是hello'
}
}
})
// 定义一个局部组件
var saybyebye={
template:`
<div>
<div>你好</div>
// 插槽内容
<slot></slot>
</div>
`
}
var app = new Vue({
el:'#app',
data(){
return{
name:"张三",
}
},
// 注册局部组件
components:{
saybyebye
}
})
</script>
</html>
ranura con nombre
- Las ranuras con nombre se declaran con un nombre especificado. Se mostrará selectivamente en subcomponentes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,{
{
name}}
<hello></hello>
<saybyebye>
<div slot="niu1">我是插槽的内容</div>
<template #niu2>
<div>你好niu2</div>
</template>
<template v-slot:niu3>
<div>你好niu3</div>
</template>
</saybyebye>
</div>
<template id="myhello">
<div>hello,{
{
name}}</div>
</template>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 注册了一个全局组件，名字叫hello
Vue.component('hello',{
template:`#myhello`,
data(){
return{
name:'我是hello'
}
}
})
// 定义一个局部组件
var saybyebye={
template:`
<div>
<slot name="niu1"></slot>
<div>你好niu1</div>
// 插槽内容
<slot name="niu2"></slot>
<slot name="niu3"></slot>
</div>
`
}
var app = new Vue({
el:'#app',
data(){
return{
name:"张三",
}
},
// 注册局部组件
components:{
saybyebye
}
})
</script>
</html>
Tres, árbitros y padres.
La función de estas dos propiedades es obtener la matriz de instancias del componente secundario y la instancia del componente principal.
Con una instancia, puede operar fácilmente las propiedades y métodos del componente.
- árbitros
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
name}}
<button @click="ouda">打一顿</button>
<Myheader ref="dawa"></Myheader>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
}
var app = new Vue({
el:'#app',
data(){
return{
name:'小豪',
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
},
},
components:{
Myheader
}
})
</script>
</html>
- padre
El uso de $refs requiere declarar su propio nombre de referencia a través del atributo ref en el elemento secundario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,我是{
{
name}}
<Myheader ref="dawa"></Myheader>
<Myheadererwa ref="erwa" ></Myheadererwa>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
</div>
`,
}
var Myheadererwa = {
template:`
<div>
<button @click="jiao">叫爷爷</button>
</div>
`,
data(){
return{
}
},
methods:{
jiao(){
this.$parent.name="爷爷"
},
},
}
var app = new Vue({
el:'#app',
data(){
return{
name:'小豪',
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
4. Comunicación entre los componentes padre e hijo.
4.1 Pasar de padre a hijo: Al pasar de padre a hijo, pasa por atributos.
- En la etiqueta del componente secundario, personalice las propiedades y los valores.
<Myheader ref="header" age="18" :sex="sex"></Myheader>
- Dentro del subcomponente, obtenga todos los valores a través del atributo props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
name}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
name:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
4.2, el componente principal escucha eventos personalizados
<Myheadererwa -parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
changname}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="chuanzhi">发送一条信息</button>
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
methods:{
chuanzhi(){
this.$middleBus.$emit('jieshou','你好child01,我是child02');
}
}
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
<button @click="happyNewYear">给爷爷拜年</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
happyNewYear(){
// 触发自定义事件
this.$emit('to-parent-event',this.xingming)
}
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
changname:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
bainian(xingming){
console.log(xingming+"给您拜年了 ");
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
5. Comunicación entre componentes que no son padres e hijos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
changname}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="chuanzhi">发送一条信息</button>
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
methods:{
chuanzhi(){
this.$middleBus.$emit('jieshou','你好child01,我是child02');
}
}
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
<button @click="happyNewYear">给爷爷拜年</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
happyNewYear(){
// 触发自定义事件
this.$emit('to-parent-event',this.xingming)
}
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
changname:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
bainian(xingming){
console.log(xingming+"给您拜年了 ");
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
- Crear un componente público
Vue.prototype.$middleBus = new Vue();
- El remitente, en el componente público, desencadena un evento.
this.$middleBus.$emit('sendMsg','你好child01,我是child02');
- Receptor, escucha este evento en el componente público y acepta datos.
this.$middleBus.$on('sendMsg',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
this.msg = val;
});
6. Mezclar
-
definición
- Proporciona una forma muy flexible de distribuir funciones reutilizables en componentes de Vue. Un mixin puede contener opciones de componentes arbitrarios. Cuando un componente utiliza un mixin, todas las opciones del mixin se "mezclarán" con las opciones del propio componente.
-
Método de escritura
- local
- Definir un objeto de mezcla
- local
var myMixin = {
data() {
return {
mixinname: '混入姓名',
};
},
mounted() {
console.log('我是混入的组件');
},
};
- proyecto
mixins: [myMixin],
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
changname}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var commonMixin = {
data(){
return{
mixinName:'葫芦'
}
},
mounted(){
console.log( "混入对象" +this.mixinName);
}
}
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}---{
{mixinName}}
<button @click="chuanzhi">发送一条信息</button>
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
methods:{
chuanzhi(){
this.$middleBus.$emit('jieshou','你好child01,我是child02');
}
},
mixins:[commonMixin]
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
<button @click="happyNewYear">给爷爷拜年</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
happyNewYear(){
// 触发自定义事件
this.$emit('to-parent-event',this.xingming)
}
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
changname:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
bainian(xingming){
console.log(xingming+"给您拜年了 ");
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
mezcla global
- Definir un objeto de mezcla
- Introducir y utilizar
Vue.mixin(myMixin);
Aviso
- Cuando los componentes y mixins contienen opciones con el mismo nombre, estas opciones se "fusionarán"
- Los datos de los componentes tienen prioridad cuando las opciones entran en conflicto
- Utilice los mixins globales con precaución, ya que afectan tanto a las instancias como a todos los componentes.
por fin
祝大家： 愿每个人都能遵循自己的时钟，做不后悔的选择。