Vueの関数式コンポーネントの巨大なピット

3866 ワード
Vue
今日公式サイトのドキュメントを見て、多重化可能な移行を見たとき、公式サイトでは関数式コンポーネントで代用できると言っていました.以下のようにします.
Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})

当時私は自分で書いた例で、公式サイトのコードをコピーしていなかったので、大きな穴に遭遇したとは思わなかった.私が作った例の移行効果は有効ではないことに気づきました.デバッグツールを開いて要素をチェックしてみると、意外にもfunctionalfadeのラベルがレンダリングされていて、中のスロットの内容は正しいですが、このfunctionalfadeはおかしいです.登録するときはFunctionalFadeと書いていますが、Vueもアルパカの書き方をサポートしています.その時、自動的に横棒で接続されます.問題はここです.functionalfadeには横棒接続がありません.絶えず資料を探して、ドキュメントをめくった後、私は突然発見して、関数式のコンポーネントはただ1つの関数で、これは肝心な点であるべきで、私はこれがいったい何なのかよく分かりませんが、その上公式サイトの関数式のコンポーネントはコンポーネントを登録する時もアルパカの命名法を使っていないで、私は関数式のコンポーネントとコンポーネントが同じものではないと思っています.コンポーネントで特別にサポートされているアルパカの書き方は、関数コンポーネントでは使用できない可能性があります.htmlの仕様に従う必要があります.コンポーネントの名前を変更しました.キーコードは次のとおりです.
new Vue({
	components: {
		'functional-fade': FunctionalFade
	}
})

リフレッシュしてバグ解決を発見します.午後はこのように浪費した.
Vueチュートリアルのインストール
vue親子コンポーネントの値伝達の2つの方法