Tabla de contenido
Prefacio
Dos características principales de Vue:
1. Sistema de componentes
2.
Basado en datos Por lo tanto, Component es una de las características más poderosas de Vue.js. Los componentes pueden extender elementos HTML para encapsular código reutilizable. La atención se centra en la reutilización.
Entonces, ¿cuáles son los valores que se pasan entre los componentes? Hay
tres tipos comunes de situaciones: padre-hijo, hijo que pasa-padre y no padre-hijo que pasa componentes.
1. El componente principal pasa el valor al componente secundario
1,1 、 accesorios
Es decir, el componente padre pasa valores al componente hijo a través de propiedades y el componente hijo los recibe a través de accesorios .
// 父组件
<son-component :toNumber="Number" />
export default {
components: {
SonComponent
}
......
}
Use accesorios (que pueden ser una matriz o un objeto) en el subcomponente para recibirlo. Puede pasar varios atributos.
// 子组件
export default {
props: ['toNumber']
}
Hay muchas formas de escribir accesorios.
//1、指定传入的类型，如果类型不对会警告
props: {
toNumber: Number}
//2、多个可能的类型
props: {
toNumber: [String, Number] }
//3、必填的数字
prosp: {
toNumber: {
type: Number, requires: true } }
//4、带有默认值
prosp: {
toNumber: {
type: Number, value: 1} }
//5、default指定默认值
props: {
toNumber: {
type: Number,
default: () => []
}
}
El valor del componente principal recibido por el componente secundario se divide en dos tipos generales: tipo de referencia y tipo ordinario
: cadena (Cadena), número (Número), booleano (booleano), nulo (nulo)
tipo de referencia: matriz (matriz) , objeto (Objeto)
1.2 、 proporcionar / inyectar
Adecuado para la comunicación de nietos, padre e hijo.
// 父组件
<div>
<button @click="changeName">修改姓名</button>
<child-b />
</div>
<script>
......
data() {
return {
name: "Jack"
};
},
provide() {
return {
parentObj: this //提供祖先组件的实例
};
},
methods: {
changeName() {
this.name = 'Lily'
}
}
</script>
//后代组件
<template>
<div class="border2">
<P>姓名：{
{
parentObj.name}}</P>
</div>
</template>
<script>
export default {
inject: {
parentObj: {
default: () => ({
})
}
} // 或者inject: ['parentObj']
};
</script>
2. El componente secundario pasa el valor al componente principal.
2.1 、 esto. $ Emit ()
El componente hijo está vinculado a un evento, que se activa con esto. $ Emit ()
// 子组件
<button @click="changeParentName">改变父组件的name</button>
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'ShuFeng') // 触发父组件中handleChange事件并传参ShuFeng
// 注：此处事件名称与父组件中绑定的事件名称要一致
}
}
}
// 父组件
<child @handleChange="changeName"></child>
methods: {
changeName(name) {
// name形参是子组件中传入的值ShuFeng
this.name = name
}
}
2.2. A través de la función de devolución de llamada
// 父组件
<child :callback="callback"></child>
methods: {
callback: function(name) {
this.name = name
}
}
// 子组件
<button @click="callback('shuFeng')">改变父组件的name</button>
props: {
callback: Function,
}
2.3. Acceda a instancias de componentes a través de $ parent / $ children o $ refs
// 子组件
export default {
data () {
return {
title: '子组件'
}
},
methods: {
sayHello () {
console.log('Hello');
}
}
}
// 父组件
<template>
<child ref="childRef" />
</template>
<script>
export default {
created () {
// 通过 $ref 来访问子组件
console.log(this.$refs.childRef.title); // 子组件
this.$refs.childRef.sayHello(); // Hello
// 通过 $children 来调用子组件的方法
this.$children.sayHello(); // Hello
}
}
</script>
2.4 、 $ attrs / $ oyentes
$ attrs / $ listeners, generalmente usados junto con hereitAttrs.
//父组件
<template>
<child :name="name" :age="age" :infoObj="infoObj" @updateInfo="updateInfo" @delInfo="delInfo" />
</template>
<script>
import Child from '../components/child.vue'
export default {
name: 'father',
components: {
Child },
data () {
return {
name: 'Lily',
age: 22,
infoObj: {
from: '上海',
job: 'policeman',
hobby: ['reading', 'writing', 'skating']
}
}
},
methods: {
updateInfo() {
console.log('update info');
},
delInfo() {
console.log('delete info');
}
}
}
</script>
//子组件
<template>
<grand-son :height="height" :weight="weight" @addInfo="addInfo" v-bind="$attrs" v-on="$listeners" />
// 通过 $listeners 将父作用域中的事件，传入 grandSon 组件，使其可以获取到 father 中的事件
</template>
<script>
import GrandSon from '../components/grandSon.vue'
export default {
name: 'child',
components: {
GrandSon },
props: ['name'],
data() {
return {
height: '180cm',
weight: '70kg'
};
},
created() {
console.log(this.$attrs);
// 结果：age, infoObj, 因为父组件共传来name, age, infoObj三个值，由于name被 props接收了，所以只有age, infoObj属性
console.log(this.$listeners); // updateInfo: f, delInfo: f
},
methods: {
addInfo () {
console.log('add info')
}
}
}
</script>
//grandSon.vue 组件：
<template>
<div>
{
{
$attrs }} --- {
{
$listeners }}
<div>
</template>
<script>
export default {
... ...
props: ['weight'],
created() {
console.log(this.$attrs); // age, infoObj, height
console.log(this.$listeners) // updateInfo: f, delInfo: f, addInfo: f
this.$emit('updateInfo') // 可以触发 father 组件中的updateInfo函数
}
}
</script>
3. Pasar valores entre componentes secundarios y no principales
3.1, $ emit y props
Aplicable a los componentes hermanos.
Use $ emit para pasar el valor al componente principal en A brother, y el componente principal para pasar el valor a B brother a través de accesorios
3.2, comunicación del hilo total del bus
Al establecer un bus de terceros como una estación de tránsito y luego tomar prestado $ emit para enviar parámetros y $ on para aceptar parámetros,
cree un bus.js
import Vue from 'vue'
export default Vue.prototype.bus = new Vue()
Introducido en main.js
import bus from './util/bus'
//发送信息组件
<template>
<button @click="changeBus()">bus</button>
</template>
...
methods: {
changeBus(){
this.bus.$emit("change",'yjw');
}
}
//接受信息组件
mounted(){
let self = this;
this.bus.$on('change',function(msg){
console.log(msg);
self.msg = msg;
})
}
3.3 、 Vuex
Vuex es un modo de gestión de estado especialmente desarrollado para aplicaciones Vue.js. Es adecuado para la transferencia de todos los componentes y la gestión unificada de datos.
3.4 、 proporcionar / inyectar
Con 1.2 como
3.5 、 $ attrs / $ oyentes
Con 2.4 como