Komponen yang ditakrifkan dalam komponen vue tidak boleh diakses

Dalam pembangunan Vue, kami biasanya menggunakan komponen untuk merangkum beberapa fungsi boleh guna semula. Kadangkala kita mungkin menghadapi situasi di mana komponen yang ditakrifkan dalam komponen tidak boleh diakses, yang sering menyebabkan kita mengalami masalah. Artikel ini akan memperincikan sebab komponen yang ditakrifkan dalam komponen Vue tidak boleh diakses dan cara menyelesaikan masalah ini.

1. Sebab

Data, kaedah, cangkuk kitaran hayat, dll. komponen Vue semuanya terkandung dalam skop komponen, dan perkara yang sama berlaku untuk komponen ditakrifkan dalam komponen. Oleh itu, komponen yang ditakrifkan di dalam komponen tidak boleh diakses terus di luar komponen.

Sebagai contoh, dalam contoh berikut, kami mentakrifkan komponen induk dan komponen anak, dan memperkenalkan komponen anak dalam komponen induk:

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  }
}
</script>

// 子组件
<template>
  <h1>这是子组件</h1>
</template>

<script>
export default {
  name: 'ChildComponent',
}
</script>

Walau bagaimanapun, jika kita berada di luar komponen anak secara langsung Mengakses subkomponen, sebagai contoh:

console.log(ChildComponent);

akan mengeluarkan output tidak ditentukan, menunjukkan bahawa subkomponen tidak boleh diakses. Ini kerana komponen anak hanya boleh dikenali dan diakses dalam skop komponen induk dan komponen anak tidak terdedah kepada skop global.

2. Penyelesaian

Jadi, bagaimana untuk menjadikan komponen yang ditakrifkan dalam komponen induk boleh diakses di luar komponen? Berikut ialah dua kaedah yang mungkin:

2.1 Menggunakan $refs

Dalam komponen Vue, setiap komponen mempunyai pengecam unik $refs, yang boleh digunakan untuk mengakses komponen atau elemen DOM. Oleh itu, kita boleh mendapatkan komponen anak melalui $refs dalam komponen induk untuk mengakses komponen dalam komponen anak.

Ubah suai kod contoh di atas, tambah butang dalam komponen induk dan akses komponen anak melalui $refs dalam acara klik butang:

// 父组件
<template>
  <div>
    <child-component></child-component>
    <button @click="accessChildComponent">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  },
  methods: {
    accessChildComponent() {
      console.log(this.$refs.childComponent.$children) // 访问子组件内部组件
    }
  }
}
</script>

// 子组件
<template>
  <div ref="childComponent">
    <h1>这是子组件</h1>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  components: {
    SubComponent: {
      name: 'SubComponent',
      template: '<div>这是子组件内部组件</div>'
    }
  }
}
</script>

Dalam kod di atas, kami menambah Tambah ref atribut supaya ia dipasang pada atribut $refs bagi komponen induk. Kemudian, sekiranya berlaku klik pada komponen induk, kami mengakses objek komponen anak melalui $refs.childComponent dan mendapatkan komponen di dalam objek komponen anak melalui harta $children.

2.2. Menggunakan mixin

Selain $refs, Vue juga menyediakan konsep mixin (campuran dalam). Mixin boleh memberikan beberapa logik biasa atau coretan kod untuk komponen, dengan itu meningkatkan kebolehgunaan semula kod. Oleh itu, kita boleh mendedahkan komponen di dalam komponen anak kepada komponen induk melalui campuran.

Ubah suai kod contoh di atas, tentukan campuran dalam subkomponen dan dedahkan komponen di dalam subkomponen kepada skop global dalam campuran:

// 父组件
<template>
  <div>
    <button @click="accessChildComponent">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  },
  methods: {
    accessChildComponent() {
      console.log(window.$SubComponent) // 访问子组件内部组件
    }
  }
}
</script>

// 子组件
<template>
  <h1>这是子组件</h1>
</template>

<script>
const SubComponent = {
  name: 'SubComponent',
  template: '<div>这是子组件内部组件</div>'
}

export default {
  name: 'ChildComponent',
  mixins: [{
    created() {
      window.$SubComponent = SubComponent
    }
  }]
}
</script>

Dalam kod di atas, kami A mixins ialah ditakrifkan dalam komponen untuk mendedahkan komponen di dalam subkomponen kepada skop global. Secara khusus, kami mentakrifkan objek SubKomponen sebagai pemalar dan melekapkannya pada sifat $SubComponent skop global dalam cangkuk campuran yang dicipta. Kemudian, dalam komponen induk, kita boleh mengakses komponen di dalam subkomponen melalui tetingkap.$SubComponent.

3. Ringkasan

Di atas ialah dua cara untuk menyelesaikan masalah komponen tidak boleh diakses yang ditakrifkan dalam komponen Vue, iaitu menggunakan $refs dan mixin. $refs sesuai untuk mengakses terus komponen dalam komponen anak dalam komponen induk, manakala mixin sesuai untuk mendedahkan komponen dalam komponen anak kepada skop global. Untuk keperluan khusus, kita boleh memilih penyelesaian yang sesuai berdasarkan situasi sebenar.

Atas ialah kandungan terperinci Komponen yang ditakrifkan dalam komponen vue tidak boleh diakses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!