Método de llamada entre componentes padre e hijo en vue

A veces necesitamos que el componente principal acceda directamente al componente secundario, el componente secundario para acceder directamente al componente principal o el componente secundario para acceder al componente raíz.

Resumen del método:

1. El componente principal accede al componente secundario: $childreno$refs
2. Componente principal de acceso al componente secundario:$parent
3. Los componentes secundarios acceden al componente raíz (la instancia raíz de Vue creada por el nuevo Vue):$root

La siguiente es una demostración detallada:

---

1. El componente principal accede al componente secundario

1.1 Usar $ niños

Dentro de los componentes principales utilizados this.$childrenpara obtener un tipo de matriz, contiene todas las instancias de subcomponentes.

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>
    <h1>我是子组件</h1>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
     
     
    el: "#app",
    data: {
     
     },
    methods: {
     
     
      btnClick() {
     
     
        //1.拿到所有子组件，是一个数组
        console.log(this.$children);

        //2.拿到一个组件实例，可以直接访问子组件中的方法和 data 中的数据
        this.$children[0].showMessage();
        console.log(this.$children[0].name);
      }
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        data() {
     
     
          return {
     
     
            name: 'webchang'
          }
        },
        methods: {
     
     
          showMessage() {
     
     
            console.log('我是子组件');
          }
        }
      }
    }
  });
</script>

1.2 Usar $ refs

$children Defectos:

• Al $childrenacceder al subensamblaje, se trata de un tipo de arreglo, en el que el acceso a través del valor del índice debe ser un subensamblaje.
• Pero cuando hay demasiados subcomponentes y necesitamos obtener uno de ellos, a menudo no podemos determinar su valor de índice e incluso puede cambiar.
• A veces, queremos obtener explícitamente uno de los componentes específicos, esta vez podemos usar $refs

$refs uso de:

• $refsY las refinstrucciones se suelen utilizar juntas.
• Primero, agregamos un subconjunto en la refpropiedad, que es equivalente a un subcomponente que está vinculado a un ID particular.
• En segundo lugar, this.$refspara obtener todos los subcomponentes etiquetados con el atributo ref (si no hay instancia de un atributo ref de subconjunto, no se puede obtener de esta manera) y obtener un objetivo final , el nombre de la propiedad es un ejemplo del atributo ref del subconjunto, el valor del atributo es la instancia del componente.
• Por this.$refs.IDel acceso a la lata componente.

<div id="app">
  <cpn ref="child1"></cpn>
  <cpn ref="child2"></cpn>
  
  <!-- 这个子组件实例没有 ref 属性，通过 this.$refs 方式拿不到这个组件实例 -->
  <cpn></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>
    <h1>我是子组件</h1>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
     
     
    el: "#app",
    data: {
     
     
      message: "hello"
    },
    methods: {
     
     
      btnClick() {
     
     
        console.log(this.$refs);
        console.log(this.$refs.child1);
        console.log(this.$refs.child1.name);
        this.$refs.child1.showMessage();
      }
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        data() {
     
     
          return {
     
     
            name: 'webchang'
          }
        },
        methods: {
     
     
          showMessage() {
     
     
            console.log('我是子组件');
          }
        }
      }
    }
  });
</script>

El resultado se muestra en la figura:

---

2. El hijo visita al padre

2.1 Usar $ parent

Si queremos acceder directamente al componente padre en el componente hijo, podemos pasar $parent

Precauciones:

• Aunque el desarrollo de Vue, nos permite $parentacceder al componente padre, pero tratamos de no hacerlo en el desarrollo real.
• Los componentes secundarios deben intentar evitar el acceso directo a los datos del componente principal, porque el acoplamiento es demasiado alto.
• Si colocamos el componente hijo en otro componente, es probable que el componente padre no tenga las propiedades correspondientes, lo que a menudo causa problemas.
• Además, no es $parentmodificando directamente el componente principal del estado, entonces el estado se convertirá en el componente principal errático, muy propicio para mi puesta en servicio y mantenimiento.

2.2 Usar $ root

Se $rootpuede acceder al uso directamente en instancias raíz de Vue

<div id="app">
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h1>我是子组件的标题</h1>
    <button @click="btnClick">我是子组件的按钮</button>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
     
     
    el: "#app",
    data: {
     
     },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        methods: {
     
     
          btnClick() {
     
     
            console.log(this.$parent);
            console.log(this.$root);
          }
        }
      }

    }
  });
</script>

En este código, el componente principal del componente secundario es la instancia raíz de Vue