Tabla de contenido
1. Introducción de componentes
2. Método de comunicación de componentes
1. El componente principal pasa el valor al componente secundario
2. El componente secundario pasa el valor al componente principal
3. Transferencia de valor entre componentes hermanos
4. Pasar valores entre componentes ancestros y componentes descendientes
5. Acerca del flujo de datos unidireccional
1. Introducción de componentes
Los componentes son una de las características más poderosas de Vue.js. Los componentes pueden extender elementos HTML, encapsulando código reutilizable. En un nivel alto, los componentes son elementos personalizados a los que el compilador de Vue agrega una funcionalidad especial. En algunos casos, los componentes también pueden aparecer como elementos HTML nativos ampliados con el atributo is. Cuando se registra un componente, se deben especificar varios parámetros para el componente.
Debido a que los componentes son instancias de Vue reutilizables, reciben las mismas opciones que el nuevo Vue, como datos, computado, observación, métodos y enlaces de ciclo de vida. Las únicas excepciones son las opciones específicas de la instancia raíz como el.
Características del componente:
- Los componentes se pueden reutilizar cualquier número de veces
- Los datos del componente deben ser una función para garantizar que cada instancia pueda mantener una copia independiente del objeto devuelto, es decir, cualquier cambio en un componente no afectará a otros componentes.
1. Definir componentes
Los componentes tienen las mismas opciones que el nuevo Vue, como datos, computado, reloj, métodos y ganchos de ciclo de vida, etc., pero los componentes no tienen las opciones, pero usan la plantilla.
let myA={
template:`
<div>
{
{msgA}}
</div>
`,
data(){
return {
msgA:'我是子组件'
}
}
};2. Registrar componentes
Antes de usar el componente, primero debe registrar el componente. Las formas de registrar el componente son: registro global y registro local
2.1 Registro mundial
Utilice Vue.component('nombre del componente', componente); para el registro global, los componentes posteriores al registro global se pueden utilizar en cualquier componente.
Vue.component('my-a',myA);2.2 Registro parcial
Los componentes registrados parcialmente solo se pueden usar en el componente actual, por lo que queremos usar el componente en qué componente y registrar localmente el componente en ese componente. Utilizamos el elemento de configuración de componentes para el registro local.
Por ejemplo, si queremos usar el componente myA en el componente myB, entonces debemos registrar parcialmente el componente myA en el componente myB:
let myA={
template:`
<div>
{
{msgA}}
</div>
`,
data(){
return {
msgA:'我是子组件'
}
}
};
let myB={
// 局部注册
components:{
//组件名: 组件
'my-a':myA
},
template:`
<div>B组件
<my-a></my-a>
</div>
`
}3. Usa componentes
Para usar componentes, solo necesita usar etiquetas html en la plantilla, y el nombre de la etiqueta es el nombre del componente:
<div id="app">
<my-a></my-a>
<my-b></my-b>
</div>2. Método de comunicación de componentes
El componente A utiliza el componente B en su plantilla. Deben comunicarse entre sí: el componente principal puede enviar datos al componente secundario y el componente secundario puede informar al componente principal de lo que sucedió dentro de él. En Vue, la relación entre los componentes principal y secundario se puede resumir a medida que se transmiten los accesorios y los eventos. El componente principal envía datos al componente secundario a través de accesorios y el componente secundario envía mensajes al componente principal a través de eventos.
1. El componente principal pasa el valor al componente secundario
La forma en que el componente principal pasa el valor al componente secundario:
Paso 1: escriba el valor que se pasará en la etiqueta del componente secundario
Paso 2: use el elemento de configuración de accesorios en el componente secundario para recibir el valor pasado por el componente principal
<body>
<div id="app">
<!-- 父组件传值给子组件 -->
<!-- 1.在子组件标签上 写入传入的值 -->
<!-- 静态传参 不使用v-bind进行数据绑定，那么传递的就是'msg'字符串本身-->
<!-- <my-a msg1="msg"></my-a> -->
<!-- 动态传参 使用v-bind进行数据绑定，就可以传递任意类型的值-->
<my-a :msg2="msg" :age="18" :obj="{name:'zhangsan'}" :stu='[1,2,3]'></my-a>
</div>
<script>
let myA={
// 子组件内使用props接收父组件传递的值
props:['msg2','stu','age','obj'],
template:`
<div>
我是子组件<br>
{
{msg2}}---{
{typeof msg2}}<br>
{
{stu}}---{
{typeof stu}}<br>
{
{age}}---{
{typeof age}}<br>
{
{obj}}---{
{typeof obj}}
</div>
`
};
new Vue({
// 局部注册组件
components:{
'my-a':myA
},
el:"#app",
data:{
msg:'我是父组件'
}
})
</script>
</body>En accesorios, el componente secundario puede realizar la verificación de tipo en el valor pasado del componente principal. Cuando el valor pasado no es el tipo que queremos, se informará un error. En este momento, los accesorios deben escribirse en forma de un objeto:
Nota: nulo e indefinido pueden pasar cualquier tipo de validación
<body>
<div id="app">
<!-- 父组件传值给子组件 -->
<!-- 1.在子组件标签上 写入传入的值 -->
<!-- 静态传参 不使用v-bind进行数据绑定，那么传递的就是'msg'字符串本身-->
<!-- <my-a msg1="msg"></my-a> -->
<!-- 动态传参 使用v-bind进行数据绑定，就可以传递任意类型的值-->
<my-a :msg2="msg" :age="18" :obj="{name:'zhangsan'}" :stu='[1,2,3]' :stu2="19"></my-a>
</div>
<script>
let myA = {
// 子组件内使用props接收父组件传递的值
props: {
age: {
// 可以进行多个类型值的校验
// 可以是Number,String,Boolean类型中的任意一个
type: [Number, String, Boolean],
// 自定义校验器规则 参数val表示传过来的值
validator(val) {
return val > 50
}
},
msg2: String,
obj: Object,
stu2: String,
stu: {
type: Array,
// 可以设置默认值，注意：需要写成函数的形式
default () {
return [4, 5, 6]
},
//要求必须传递
required: true
}
},
template: `
<div>
我是子组件<br>
{
{msg2}}---{
{typeof msg2}}<br>
{
{stu}}---{
{typeof stu}}<br>
{
{stu2}}---{
{typeof stu2}}<br>
{
{age}}---{
{typeof age}}<br>
{
{obj}}---{
{typeof obj}}
</div>
`
};
new Vue({
// 局部注册组件
components: {
'my-a': myA
},
el: "#app",
data: {
msg: '我是父组件'
}
})
</script>
</body>
2. El componente secundario pasa el valor al componente principal
La forma en que el componente secundario pasa los valores al componente principal:
Paso 1: use $emit('emit event name', los parámetros pasados) en el componente secundario para emitir eventos personalizados y pasar valores al componente principal
Paso 2: declarar un evento personalizado en el componente principal para recibir parámetros
<body>
<div id="app">
<!-- 自定义事件 -->
<my-a @my-event="handler"></my-a>
</div>
<script>
let myA = {
template: `
<div>我是子组件
<button @click='toSend'>子传值给父</button>
</div>
`,
data() {
return {
subMsg: "我是子组件A,我要给父组件传值"
}
},
methods: {
toSend() {
// 发射事件 $emit('发射事件的名称'，传递的参数)
this.$emit('my-event', this.subMsg)
}
}
}
new Vue({
components: {
'my-a': myA
},
el: '#app',
data: {
msg: "我是父组件",
},
methods: {
handler(a) {
console.log(a, '这是子组件的值');
}
}
})
</script>
</body>
3. Transferencia de valor entre componentes hermanos
La forma de pasar valores entre componentes hermanos:
Usando el bus de eventos:
Paso 1: Declare un bus de eventos xxx.js, es decir, cree un nuevo archivo js y exporte una instancia de Vue en el archivo js
Paso 2: Introduzca el bus de eventos xxx.js, es decir, importe el archivo xxx.js en uno de los componentes hermanos y use $emit() para emitir datos
Paso 3: importe el archivo xxx.js en otro componente hermano y use $on() para recibir los datos pasados por el componente hermano
Demostramos en andamios vue:
Después de crear el scaffolding, creamos dos archivos .vue en la carpeta de componentes en src, a saber, Header.vue y Footer.vue, y luego introducimos y usamos estos dos componentes en App.vue. En este momento, Header.vue y Footer. vue son componentes hermanos y, a continuación, cree un nuevo archivo eventBus.js en src, que es el bus de eventos.
aplicación.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Header/>
<hr>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
Footer,
},
data() {
return {
msg:'我是祖先组件'
}
},
provide(){
return {'msg':this.msg}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>eventBus.js
import Vue from 'vue';
export default new Vue();Encabezado.vue
<template>
<div>
{
{msgH}}
<button @click="handler">点击我传值给Footer</button>
</div>
</template>
<script>
// 引入事件总线
import Bus from '../eventBus.js'
export default {
data(){
return {
msgH:"头部组件",
Footer:"这是兄弟组件Footer"
}
},
methods:{
handler(){
// 兄弟组件传值
// 1.兄弟组件使用$emit('发射事件',携带参数)
Bus.$emit('toFoot',this.Footer)
}
}
}
</script>footer.view
<template>
<div>
{
{msgF}}
</div>
</template>
<script>
// 引入事件总线
import Bus from '../eventBus.js'
export default {
data(){
return {
msgF:"底部组件",
}
},
// 另一个兄弟组件使用 $on(自定义事件名称,(形参 用于接收兄弟组件传递过来的值)=>{}) 接收参数
created(){
Bus.$on('toFoot',(a)=>{
console.log(a,"这是Footer传给我的值");
})
}
}
</script>
4. Pasar valores entre componentes ancestros y componentes descendientes
El método de pasar valores entre componentes ancestros y componentes descendientes:
el primer paso: los componentes ancestros usan el método provide para pasar datos
Paso 2: los descendientes usan inyectar para inyectar datos
También demostramos en el andamiaje vue:
cree un nuevo archivo FooterChild.vue en la carpeta de componentes, luego use el componente FooterChild.vue en el componente Footer.vue y use el componente Footer.vue en App.vue, luego App.vue se usará como el componente principal, FooterChild.vue se usará como el componente descendiente.
aplicación.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Header/>
<hr>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
Footer,
},
data(){
return {
msg: '我是祖先组件',
a: 18
}
},
// 祖先组件使用provide方法提供传递的数据
provide(){
return {
"msg":this.msg,
"a":this.a
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>footer.view
<template>
<div>
{
{msgF}}
<FooterChild/>
</div>
</template>
<script>
import FooterChild from './FooterChild.vue'
export default {
components:{
FooterChild
},
data(){
return {
msgF:"底部组件",
}
}
}
</script>FooterChild.vue
<template>
<div>
{
{msgC}}--{
{msg}}--{
{a}}
</div>
</template>
<script>
export default {
data(){
return {
msgC:"底部组件的子组件"
}
},
// 注入数据
inject:['msg','a']
}
</script>
5. Acerca del flujo de datos unidireccional
El flujo de datos unidireccional significa que los datos fluyen de la capa superior a la capa inferior, es decir, cuando cambian los datos del componente principal, los datos del componente secundario también cambiarán; mientras que los datos del componente secundario cambian , los datos del componente principal no se verán afectados Influencia.