1. Comunicación del componente entre padres e hijos.

1. El componente secundario obtiene las variables del componente principal a través de accesorios y el componente principal llama al método en el componente secundario (ambos son la idea de pasar de padre a hijo)

a: Los componentes secundarios obtienen las variables del componente principal a través de accesorios

Palabra clave del método: props Pasos (2 pasos):

Definido en la etiqueta del componente secundario de referencia del componente principal para aceptar el nombre de la variable y pasar el valor. Fórmula:: El componente secundario acepta el nombre de la variable = "el nombre de la variable que pasará el componente principal", como por ejemplo: nowPriceF="nowPrice"

Defina el objeto de accesorios para recibir variables en el nivel del método data() del subcomponente. Fórmula: accesorios: { } Como: accesorios: {nowPriceF: Number}

// 父组件
<Add :nowPriceF='nowPrice'></Add>

// 子组件
export default {
 props: {
   nowPriceF: Number
 },
 data() {}
}

b: el componente principal llama al método en el componente secundario

Palabras clave del método: ref, $refs Pasos (3 pasos):

Defina ref en la etiqueta del componente secundario de referencia del componente principal y use ref para obtener la variable del componente secundario. Fórmula: ref="Defina un valor de referencia único para el componente secundario", como: ref="addChild" Llame directamente al método en el componente secundario en el componente principal y podrá pasar parámetros. Los componentes secundarios también pueden utilizar este método para obtener variables del componente principal.

Fórmula: this.refs. add C hild. Nombre del método en el subcomponente ∗ ∗ Como por ejemplo: ∗ ∗ th es. refs.addChild. Nombre del método en el subcomponente** Por ejemplo: **this.refs.addChild. Nombre del método en el subcomponente ∗ ∗Por ejemplo: ∗∗this.refs.addChild.calculateWithdrawal(row) es un método que se llama en un componente secundario y puede obtener parámetros. Fórmula: Defina lo mismo que los métodos ordinarios, como: calcularRetiro(fila){ }

/父组件
<Add ref="addChild" :nowPriceF='nowPrice'></Add>
//在所用的方法获取，addForm:子组件中变量名
this.$refs.addChild.calculateWithdrawal(row)

calculateWithdrawal(row){
    console.log('父组件中调用了这个方法并传递了参数'，row)
}

2. El componente principal obtiene las variables del componente secundario a través de ref y el método del componente secundario que llama al componente principal (ambas son ideas de transmisión del componente secundario al padre)

a: El componente principal obtiene la variable del componente secundario a través de referencia

Palabras clave del método: ref, $refs Pasos (2 pasos):

Defina ref en la etiqueta del componente secundario de referencia del componente principal y use ref para obtener la variable del componente secundario. Fórmula: ref="Defina un valor de referencia único para los subcomponentes", como por ejemplo: ref="addChild"

Obtenga las variables del componente secundario directamente en el componente principal. Fórmula: nombre de la variable en este subcomponente.$refs.addChild., como por ejemplo: this.$refs.addChild.addForm

//父组件
<Add ref="addChild" :nowPriceF='nowPrice'></Add>
//在所用的方法获取，addForm:子组件中变量名
this.$refs.addChild.addForm

b: El componente secundario llama al método del componente principal.

Palabra clave del método: $emit Pasos (2 pasos):

En el componente secundario, llame al método definido en el componente principal mediante emisión y pase las variables como parámetros. Fórmula: escriba esto en la función activada en el componente secundario. emit llama al método definido en el componente principal y toma las variables como parámetros. Fórmula: this.emit调用父组件中定义的方法，将变量以参数带过去。公式：在子组件中触发的函数里面写this.emit(‘传递到父组件的方法名’,需要传递的变量)”, como por ejemplo: this.$emit('lookPhotos',file.url)

Obtenga el método definido por el componente secundario en la etiqueta del componente secundario de referencia del componente principal y obtenga los parámetros. Fórmula: el componente @child define el nombre del método pasado al componente principal = "el método del componente principal para obtener la variable de parámetro ($event)", como por ejemplo: @lookPhotos="lookPhotosUrl($event)"

//子组件
handlePictureCardPreview(file) {
  this.$emit('lookPhotos',file.url)
  //lookPhotos 定义传递到父元素的方法名
  //file.url 父元素要获取的东西
},

//父组件
<Add ref="addChild" @lookPhotos="lookPhotosUrl($event)" :nowPriceF='nowPrice'></Add>

//在methods: {}中获取
lookPhotosUrl(url){
   console.log('父元素需要的东西'，url)
},

3. Resumen

a: El componente principal llama/obtiene los parámetros/métodos en el componente secundario a través de referencia

b: El componente secundario llama al método del componente principal mediante emisión

c: Los componentes secundarios obtienen las variables del componente principal a través de accesorios

2. Comunicación del componente hermano

1. Comunicación de componentes Brother a través de bus

paso:

un montaje nuevo Vue() al prototipo de vue en el archivo main.js

b Utilice this.$bus.$on() para inicializar en el componente que acepta la comunicación.

c Utilice this.$bus.$emit('nombre del método', parámetro 1, parámetro 2...) en el componente de comunicación inicial

// mian.js
 
import Vue from 'vue'
import App from './App'
import router from './router'
//重要
 
Vue.prototype.$bus = new Vue(); // 设置 挂载至 vue 的原型上
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

componente principal

<template>
  <div class="box">
      <div>我是父组件</div>
 
      <div style="display: flex">
        <!-- 子组件 1 （-_- 我和 子组件2 是同级关系 所以是兄弟组件 -_- ）-->
        <baby1 class="border"></baby1>
        <!-- 子组件 2 （-_- 我和 子组件1 是同级关系 所以是兄弟组件 -_- ）-->
        <baby2 class="border"></baby2> 
      </div>
      
  </div>
</template>
 
<script>
import baby1 from '@/components/html/baby1.vue'
import baby2 from '@/components/html/baby2.vue'
 
export default {
  name: 'home',
  components:{
    baby1,
    baby2
  }
}
</script>

Subcomponente 1

<template>
  <div class="box">
        <div>我是子组件1</div>
        <input v-model="value" style="width: 100%">
        <button @click="handleFetchHomeFunction">将值 更新至 子组件2</button>
  </div>
</template>
 
<script>
 
export default {
    name: 'baby1',
    data(){
        return{
            value: ''
        }
    },
    methods: {
        // 调用 兄弟组件 方法
        handleFetchHomeFunction(){
            this.$bus.$emit('valueUpdate', this.value)
        }
    }
}
</script>

Subcomponente 2

<template>
  <div class="box">
        <div>我是子组件2</div>
        <input v-model="value" style="width: 100%">
  </div>
</template>
 
<script>
 
 
export default {
    name: 'baby1',
    data(){
        return{
            value: ''
        }
    },
    mounted(){
        // 接收事件
        this.$bus.$on('valueUpdate', (value)=>{
            this.value = value;
        })
    },
}
</script>

Comunicación de componentes entre padres e hijos de Vue, comunicación de componentes entre hermanos