vueのダイナミックコンパイル

1668 ワード

動的コンパイルの要件:テーブルコンポーネントを書く場合、テーブルの列がカスタマイズ可能であることが必要です.たとえば、この列はクリック応答イベントを実現し、このような要件を実現するには、プロファイルを書くことで実現できます.
実装方式1
data(){
      let me = this
      return {
        name:'  ',
        list:[
          {name:'cccc11212121', callback:function(value){
            return {
              template:`{{value.name}}`,
              methods:{
                callback:me.showName
              },
              data(){
                return {
                  value:value
                }
              }
            }
          }},
          {name:'bbbbb'},
          {name:'ccccc'},
          {name:'ddddd'},
          {name:'eeeee'},
          {name:'fffff'},
          {name:'ggggg'}
        ]
      }
    }

その後、このコールバック関数は、isを使用してサブコンポーネントにコンポーネントを動的に追加することによって呼び出される.
実装方式2vuex方式による状態管理
実装方式3vue render法により実現され、elementuiソースコードを参照
実装方式4
スロットに作用する親コンポーネントでtemplateを定義し、scopeを介してサブコンポーネントの一時変数を受信する

      

次に、子コンポーネントで親コンポーネントに変数を渡します.

  • 参照vueダイナミックコンポーネントvue役割ドメインスロットelementui