Vueの組立詳細----高度な使い方

1.動的コンポーネント

Vue.js動的に異なるコンポーネントをロードするために使用される特殊な要素<成分>を提供し、搭載される部品の特性を選択するために使用されます。
例としては、次のとおりです：

   <div id="app21">
       <component :is="currentView"></component> <button @click="changeView('A')">切换到A</button> <button @click="changeView('B')">切换到B</button> <button @click="changeView('C')">切换到C</button> </div>

var app21 =  new Vue({
   el: '#app21',
   data: { currentView: 'comA' }, methods: { changeView: function(data){ this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。 } }, components: { comA: { template: '<div>组件A</div>' }, comB: { template: '<div>组件B</div>' }, comC: { template: '<div>组件C</div>' } } });

2、再帰成分

そのテンプレート内のコンポーネントはそれに名前コンポーネントの設定オプションに、自分自身を再帰的に呼び出します。

例としては、次のとおりです：

   <div id="app19">
       <my-component19 :count="1"></my-component19> </div>

Vue.component('my-component19',{
   name: 'my-component19',  //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
   props: {
     count: { type: Number, default: 1 } }, template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>' }); var app19 = new Vue({ el: '#app19' });

レンダリング結果：

  <div id="app19">
   <div> <div> <div><!----></div> </div> </div> </div>

名前を設定した後、アセンブリテンプレートに再帰的に使用することができますが、それは注意が必要なのは、それ以外の場合はエラーがスローされます、条件に再帰の数を制限する必要があることである：最大スタックサイズを超えました。
コンポーネントは、再帰的階層関係を有する独立したコンポーネントの数を開発するために使用され、このようなツリーカスケード制御セレクタ等、不明です。

3.コンポーネントスロットSOLT

3.1最初の使用

親コンポーネント

 <templateSolt></templateSolt>
 <templateSolt> <p>slot分发了内容</p> </templateSolt>

サブコンポーネント

<div>
  <h1>这是slot子组件</h1> <slot> 如果slot没有分发内容。 </slot> </div>

次のような効果があります

Iないコンテンツが表示されない場合、親コンポーネントがコンテンツを持っている場合、コンテンツは、サブアセンブリを覆う、親コンポーネントを示す必要があり、親コンポーネントをスロットを理解する必要がサブコンポーネント

3.2二次利用

この用法は、スロットと命名されるべき、我々が持っているよりも多くのでしている
親コンポーネント

   <templateSlotNamed>
      <h1 slot="footer">footer</h1> <h1 slot="header">header</h1> <h1>Default content</h1> </templateSlotNamed>

サブコンポーネント

 <div>
   <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div>

次のような効果があります

私は、親コンポーネントの交換位置のヘッダとフッタを置く
実際のコンテンツは、サブアセンブリの位置によって決定されることを示す一つのことを、証明するために。

4.非同期成分：ページは、それがサーバーからロードされたときにコンポーネントを使用する必要があります。

原理：符号分割のWebPACKの使用は、構成要素前提に非同期呼び出しです。ここでは、非同期のコンポーネントを実装する方法です。

ケース：

最初は、4つの成分が最初に命名される3および4を第二作成するコンポーネントである。次のように：

first
<template>
<div>我是第一个页面</div> </template> second <template> <div>我是第二个页面</div> </template> three <template> <div>我是第三个页面</div> </template> four <template> <div>我是第四个页面</div> </template>

Index.jsルーティング・コード、二つの方法の非同期コンポーネント、コードスキーム1及びスキーム2であり;注意：プログラムが追加する必要が syntax-dynamic-import プラグインを

import Vue from 'vue'
import VueRouter from 'vue-router' /*import First from '@/components/First' import Second from '@/components/Second'*/ Vue.use(VueRouter) //方案1 const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue"); const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue"); const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue"); const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue"); //方案2 const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1') const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1') const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2') const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2') //懒加载路由 const routes = [ { //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面 path:'/', //重定向，就是给它重新指定一个方向，加载一个组件； component:first }, { path:'/first', component:first }, { path:'/second', component:second }, { path:'/three', component:three }, { path:'/four', component:four } //这里require组件路径根据自己的配置引入 ] //最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。 const router = new VueRouter({ routes }) export default router;