vueのダイナミックコンパイル
1668 ワード
動的コンパイルの要件:テーブルコンポーネントを書く場合、テーブルの列がカスタマイズ可能であることが必要です.たとえば、この列はクリック応答イベントを実現し、このような要件を実現するには、プロファイルを書くことで実現できます.
実装方式1
その後、このコールバック関数は、
実装方式2
実装方式3
実装方式4
スロットに作用する親コンポーネントでtemplateを定義し、scopeを介してサブコンポーネントの一時変数を受信する
次に、子コンポーネントで親コンポーネントに変数を渡します.
参照vueダイナミックコンポーネントvue役割ドメインスロットelementui
実装方式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
を使用してサブコンポーネントにコンポーネントを動的に追加することによって呼び出される.
実装方式2
vuex
方式による状態管理実装方式3
vue render
法により実現され、elementui
ソースコードを参照実装方式4
スロットに作用する親コンポーネントでtemplateを定義し、scopeを介してサブコンポーネントの一時変数を受信する
{{props.text["name"]}}
次に、子コンポーネントで親コンポーネントに変数を渡します.
参照vueダイナミックコンポーネントvue役割ドメインスロットelementui