In Vue2.x wird die Weitergabe von Werten zwischen Großeltern und Enkelkindern durch Bereitstellen und Injizieren realisiert

einführen

Die Kommunikation zwischen Großeltern und Enkelkindern kann durch die Verwendung von undprovide erreicht werden; normalerweise werden diese beiden Eigenschaften zusammen verwendet; die Vorfahrenkomponente übergibt den Wert, der an die Nachkommenkomponente übergeben werden muss ; dann fügt die Nachkommenkomponente Abhängigkeiten ein; egal wie tief die Hierarchie ist , es kann verwendet werden Die Daten und Methoden, die von den Vorgängerkomponenten übergeben werden. Die Wertübergabe von Großeltern- und Enkelkinderkomponenten wird im Allgemeinen in mehrstufigen Beziehungen verwendet und ist bequem zu verwenden.injectprovidereturn inject

verwenden

Vorgängerkomponente:

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      user: {
    
    
        name: 'lisa',
        age: 14,
      },
      number: 1,
      list: [
        {
    
    
          index: 0,
          str: 'first'
        },{
    
    
          index: 1,
          str: 'second'
        }
      ]
    }
  },
  provide() {
    
    
    return {
    
    
      state: this,  // 将整个this 传递给子孙组件
    }
  }
}
</script>

Abkömmlinge:

 <template>
    <div class="son">
      <span>{
    
    {
    
    state.member}}</span>
    </div>
 </template>
<script>
export default {
    
    
   inject: ['state'], //注入依赖
   data() {
    
    
    return {
    
    
    }
  },
	created() {
    
    
	  console.log(this.state); // 打印祖先组件传递过来的整个this对象
	}
}
</script>

おすすめ

転載: blog.csdn.net/Shivy_/article/details/127968325