「Vue.jsコンポーネントの概要」の基本概念

validatorプロパティを使用してpropsを検証

  //            
  <span class="hljs-keyword">function</span> oneOf (value, validList) {
    <span class="hljs-keyword">for</span> (<span class="hljs-built_in">let</span> i = 0; i < validList.length; i++) {
      <span class="hljs-keyword">if</span> (value === validList[i]) {
        <span class="hljs-built_in">return</span> <span class="hljs-literal">true</span>;
      }
    }
    <span class="hljs-built_in">return</span> <span class="hljs-literal">false</span>;
  }

  <span class="hljs-built_in">export</span> default {
    props: {
      size: {
        validator (value) {
          <span class="hljs-built_in">return</span> oneOf(value, [<span class="hljs-string">'small'</span>, <span class="hljs-string">'large'</span>, <span class="hljs-string">'default'</span>]);
        },
        default: <span class="hljs-string">'default'</span>
      },
      disabled: {
        <span class="hljs-built_in">type</span>: Boolean,
        default: <span class="hljs-literal">false</span>
      }
    }
  }

は、＄parent $childrenを使用して親/子コンポーネント

にアクセスする.

provide inject世代非応答式取得データ、方法

.

// A.vue
export default {
  provide: {
    name: 'Aresn'
  }
}

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // Aresn
  }
}

は、broadcastおよびdispatchが、上下の送信イベント

を完了することを実現する.

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

任意のコンポーネントを見つける

//      ，           
function findComponentUpward(context, componentName) {
  let parent = context.$parent;
  let name = parent.$options.name;

  while (parent && (!name || [componentName].indexOf(name) < 0)) {
    parent = parent.$parent;
    if (parent) name = parent.$options.name;
  }

  return parent;
}

//      ，           
function findComponentsUpward(context, componentName) {
  const parents = [];
  const parent = context.$parent;

  if (parent) {
    if (parent.$options.name === componentName) parents.push(parent);
    return parents.concat(findComponentsUpward(parent, componentName));
  }
  return [];
}

//      ，           
function findComponentDownward(context, componentName) {
  const childrens = context.$children;
  let children = null;

  if (childrens.length) {
    for (const child of childrens) {
      const name = child.$options.name;

      if (name === componentName) {
        children = child;
        break;
      } else {
        children = findComponentDownward(child, componentName);
        if (children) break;
      }
    }
  }
  return children;
}

//      ，           
function findComponentsDownward(context, componentName) {
  return context.$children.reduce((components, child) => {
    if (child.$options.name === componentName) components.push(child);
    const foundChilds = findComponentsDownward(child, componentName);
    return components.concat(foundChilds);
  }, []);
}

//      ，           
function findBrothersComponents(context, componentName, exceptMe = true) {
  const res = context.$parent.$children.filter(item => item.$options.name === componentName);
  const index = res.findIndex(item => item._uid === context._uid);
  if (exceptMe) res.splice(index, 1);
  return res;
}

Vue.extendの役割は、Vueコンストラクタに基づいて「サブクラス」を作成することです.dataは関数

でなければなりません.

$mountコンポーネントをレンダリングするために使用され、$elにアクセスできますが、ページに直接マウントされることはありません.

Vue.jsは、functionalのブール値オプションを提供し、trueに設定すると、コンポーネントのステータスなしおよびインスタンスなし、すなわちdataおよびthisコンテキストなしにすることができます.

slot-scopeの使用コンポーネント:

  
"book in books" :key="book.id">
    "book">
      
      {{ book.name }}
    
  

次の操作を行います.

"books">
  

およびisは、コンポーネントの動的切り替え

を実現する.

"component">

keep-aliveさらにいくつかの追加のpropsを構成することができます:

include:文字列または正規表現.名前が一致するコンポーネントのみがキャッシュされます.

exclude:文字列または正規表現.名前が一致するコンポーネントはキャッシュされません.

max:数値.最大数のコンポーネントインスタンスをキャッシュできます.

nextTickは、次のdom更新レンダリングで実行する

である.

v-model構文糖modelはpropとeventを受け入れ、propは受け入れられた値を指定し、eventはカスタムイベント制限をトリガーするために使用されます.1つのコンポーネントには

しかありません.

.Sync修飾子サブアセンブリ:this.$emit('update:value', this.value + val);親アセンブリ: