Apakah komponen terbina dalam dalam vuejs-Soal Jawab bahagian hadapan-php.cn

Komponen terbina dalam dalam vuejs termasuk: "", "", "", " ", "", "".

Apakah komponen terbina dalam dalam vuejs

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue2.9.6, komputer DELL G3.

komponen terbina dalam vue

Komponen terbina dalam boleh digunakan terus dalam templat tanpa pendaftaran.

, , dan semua komponen boleh digoncang oleh alat pembungkusan. Jadi mereka hanya diperkenalkan apabila digunakan. Anda juga boleh mengimportnya secara eksplisit jika anda perlu mengaksesnya secara langsung.

// Vue 的 CDN 构建版本
const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue

Salin selepas log masuk

// Vue 的 ESM 构建版本
import { KeepAlive, Teleport, Transition, TransitionGroup } from &#39;vue&#39;

Salin selepas log masuk

dan ialah atribut bentuk komponen dalam sintaks templat. Ia bukan komponen sebenar dan tidak boleh diimport seperti komponen di atas.

Berikut ialah pengenalan ringkas kepada komponen terbina dalam dalam vuejs.

Berbilang aplikasi dan mencipta komponen dinamik
Parameter adalah dan templat sebaris , Yang pertama kebanyakannya rentetan atau komponen tersuai, manakala yang kedua ialah jenis Boolean,

Contoh kod

<template>
  <div class="hello">
      <!-- 构建动态组件 -->
      <div :is="currentComp"></div>
      <!-- 按钮点击切换组件 -->
      <button v-on:click="changeComponent">改变组件</button>
  </div>
</template>

<script>
//两个自定义的组件
import login from &#39;../components/login.vue&#39;
import index from &#39;../components/index.vue&#39;
export default {
  name: &#39;BuildInComponent&#39;,
  components:{
      index,
      login
  },
  // 默认显示index组件
  data(){
      return {
          currentComp:index
      }
  },
  methods:{
      changeComponent(){
          if(this.currentComp == login){
              this.currentComp = index
          }else {
              this.currentComp = login
          }

      }
  }
}
</script>

Salin selepas log masuk

< ; keep-alive>

Apabila membungkus komponen dinamik, kejadian komponen tidak aktif dicache dan bukannya dimusnahkan. Seperti , ialah komponen abstrak: ia tidak menghasilkan elemen DOM dengan sendirinya, dan ia juga tidak muncul dalam rantaian komponen induk.
Atribut pada komponen ini termasuk termasuk, kecualikan dan maks. Dua yang pertama ialah rentetan atau ungkapan ini Cache/bukan cache komponen yang dipadankan.
Padanan terlebih dahulu menyemak pilihan nama komponen itu sendiri, dan jika pilihan nama tidak tersedia, sepadan dengan nama pendaftaran setempatnya (nilai utama pilihan komponen komponen induk). Komponen tanpa nama tidak boleh dipadankan.
Komponen ini biasanya digunakan bersama dengan v-show, v-if, v-else-if, v-else, is dan komponen lain yang mengandungi syarat

Contoh kod

<template>
  <div class="hello">
      <!-- 使用keep-alive组件包裹其它条件渲染组件，不符合条件的则会被缓存，等下次条件成立时，则会立即渲染，提高渲染效率 -->
      <keep-alive>
          <div v-if="condition == 1">
              <span>我是111111111111</span>
          </div>
          <div v-else-if="condition == 2">
              <span>我是222222222222222</span>
          </div>
          <div v-else>
              <span>我是333333333333</span>
          </div>
      </keep-alive>

  </div>
</template>

<script>
export default {
  name: &#39;BuildInComponent&#39;,
  data(){
      return {
          condition:parseInt(Math.random()*3)
      }
  },


  
 
}
</script>

Salin selepas log masuk

Tambahkan kesan peralihan elemen yang dibalut, hanya akan menggunakan kesan peralihan pada kandungan yang dibalutnya, tanpa memaparkan elemen DOM tambahan dan tidak muncul dalam hierarki komponen yang dikesan.
Biasanya digunakan dalam kombinasi dengan v-show v-if is, dsb.
Terdapat peralihan css dan peralihan js
Atribut biasa: name: string, digunakan untuk menjana nama kelas peralihan CSS: Jenis Boolean, Sama ada hendak menggunakan kelas peralihan CSS. Lalai kepada benar. Jika ditetapkan kepada palsu, cangkuk JavaScript yang didaftarkan hanya akan dicetuskan melalui peristiwa komponen
Anda juga boleh menyesuaikan nama kelas melalui atribut enter-class, leave-class dan lain-lain, yang biasanya digunakan dalam kombinasi dengan perpustakaan animasi pihak ketiga ;

peralihan css
Nama kelas peralihan css mempunyai nilai atribut nama bagi atribut peralihan (ditandakan sebagai v, jika tiada nilai atribut nama, lalai ialah v-), gabungannya adalah seperti berikut Beberapa gubahan:
1. v-enter: Mentakrifkan keadaan permulaan untuk memasuki peralihan. Ia berkuat kuasa sebelum elemen dimasukkan dan dikeluarkan pada bingkai seterusnya selepas elemen dimasukkan.
2. v-enter-active: Tentukan keadaan apabila peralihan masuk berkuat kuasa. Digunakan sepanjang peralihan, berkuat kuasa sebelum elemen dimasukkan dan dialih keluar selepas peralihan/animasi selesai. Kelas ini boleh digunakan untuk menentukan masa proses, kelewatan dan fungsi lengkung untuk memasuki peralihan.
3. v-enter-to: Versi 2.1.8 dan ke atas mentakrifkan keadaan akhir peralihan masuk. Berkuat kuasa bingkai seterusnya selepas elemen dimasukkan (pada masa yang sama v-enter dialih keluar), dan dialih keluar selepas peralihan/animasi selesai.
4. v-cuti: Mentakrifkan keadaan permulaan peralihan cuti. Ia berkuat kuasa serta-merta apabila peralihan keluar dicetuskan dan dialih keluar bingkai seterusnya.
5. v-cuti-aktif: Mentakrifkan keadaan apabila peralihan cuti berkuat kuasa. Digunakan sepanjang peralihan keluar, berkuat kuasa serta-merta apabila peralihan keluar dicetuskan dan dialih keluar selepas peralihan/animasi selesai. Kelas ini boleh digunakan untuk menentukan masa proses, kelewatan dan fungsi lengkung untuk peralihan keluar.
6. v-leave-to: Versi 2.1.8 dan ke atas Mentakrifkan keadaan tamat peralihan cuti. Berkuat kuasa bingkai seterusnya selepas peralihan cuti dicetuskan (pada masa yang sama cuti v dipadamkan), dan dialih keluar selepas peralihan/animasi selesai.

Contoh Kod

<template>
  <div class="hello">
      <!-- css过渡示例，transition组件 名称为slide-fade， -->
      <div id="example-1">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
      </div>
        <!-- css动画示例 -->
      <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
      </div>

  </div>
</template>

<script>
export default {
  name: &#39;BuildInComponent&#39;,
  data(){
      return {
          show: true
      }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

/* 也可以使用css动画 */
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

Salin selepas log masuk

js过渡

也可以在属性中声明 JavaScript 钩子函数，在钩子函数中，使用js进行动画的操作；
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成
对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

// 使用js过渡，通常在组件中监听事件，并写好监听到的回调函数即可<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled">
  <!-- ... --></transition>

Salin selepas log masuk

Props：

tag - string - 如果未定义，则不渲染动画元素。
move-class - 覆盖移动过渡期间应用的 CSS 类。
除了 mode - 其他 attribute 和相同。

事件：

事件和相同。

用法：

提供了多个元素/组件的过渡效果。默认情况下，它不会渲染一个 DOM 元素包裹器，但是可以通过 tag attribute 来定义。

注意，每个的子节点必须有独立的 key，动画才能正常工作。

支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 name attribute 或配置 move-class attribute 自动生成)。如果 CSS transform property 是“可过渡” property，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

Salin selepas log masuk

vue的内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，比如下拉loading，下拉loading只是中间内容是动态的，而拉到底部都会触发拉取更多内容的操作，因此我们可以把下拉loading做成一个有slot的插件

Props：

name - string，用于具名插槽

用法：

元素作为组件模板之中的内容分发插槽。元素自身将被替换。

Props：

to - string。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动内容的目标元素

<!-- 正确 -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<!-- 错误 -->
<teleport to="h1" />
<teleport to="some-string" />

Salin selepas log masuk

disabled - boolean。此可选属性可用于禁用的功能，这意味着其插槽内容将不会移动到任何位置，而是在你在周围父组件中指定了的位置渲染。

<teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</teleport>

Salin selepas log masuk

请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。