使用form-create動態(tài)生成vue自定義組件和嵌套表單組件
更新時間：2019年01月18日 09:45:57 作者：xaboy
這篇文章主要介紹了使用form-create動態(tài)生成vue自定義組件和嵌套表單組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用form-create動態(tài)生成vue自定義組件和嵌套表單組件
maker.create
通過建立一個虛擬 DOM的方式生成自定義組件
生成
Maker
let rule = [
formCreate.maker.create('i-button').props({
type:'primary',
field:'btn'
loading:true
})
]
$f = formCreate.create(rule);
上面的代碼是通過maker生成器動態(tài)生成一個正在加載的iview按鈕組件
Json
let rule = [
{
type:'i-button',
field:'btn'
props:{
type:'primary',
field:'btn',
loading:true
}
}
]
$f = formCreate.create(rule);
上面的代碼是通過json方式動態(tài)生成一個iview按鈕組件
修改
可以通過一下兩種方式動態(tài)修改組件的配置項
通過rule修改組件生成規(guī)則
rule[0].props.loading = false;
通過$f.component()方法獲取組件的生成規(guī)則并修改
$f.component().btn.props.loading = false;
示例
let rule = [
{
type:'row',
children:[
{
type:'i-col',
props:{
span:12
},
children:[
formCreate.maker.input('商品名稱','goods_name','iphone'),
formCreate.maker.number('商品加個','goods_price',8688)
]
},
{
type:'i-col',
props:{
span:12
},
children:[
formCreate.maker.dateTime('創(chuàng)建時間','create_at'),
formCreate.maker.radio('是否顯示','is_show').options([
{value:1,label:'顯示'},
{value:0,label:'不顯示'}
])
]
}
]
}
]
maker.template
通過模板的方式生成自定義組件,maker.createTmp方法是該方法的別名
生成
Maker
let rule = [
formCreate.maker.template('<i-button :loading="loading">{{text}}<i-button>',new Vue({
data:{
loading:true,
text:'正在加載中...'
}
}))
]
上面的代碼是通過maker生成器動態(tài)生成一個正在加載的iview按鈕組件
Json
let rule = [
{
type:'template',
template:'<i-button :loading="loading">{{text}}<i-button>',
vm:new Vue({
data:{
loading:true,
text:'正在加載中'
}
})
}
]
$f = formCreate.create(rule);
上面的代碼是通過Json方式動態(tài)生成一個iview按鈕組件
修改
可以通過一下兩種方式動態(tài)修改vm組件內部的值
通過rule獲取自定義組件的vm并修改
rule[0].vm.text = '加載完畢'; rule[0].vm.loading = false;
通過$f.component()方法獲取自定義組件的vm并修改
$f.component().btn.vm.text = '加載完畢'; $f.component().btn.vm.loading = false;
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Element Dialog對話框的使用示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結
這篇文章主要介紹了Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue使用cesium創(chuàng)建數(shù)據(jù)白模方式
這篇文章主要介紹了vue使用cesium創(chuàng)建數(shù)據(jù)白模方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3基礎安裝以及配置詳解,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)拖住滑塊拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue封裝Animate.css動畫庫的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
VUE3中引入.env下的環(huán)境變量,顯示process未定義問題
這篇文章主要介紹了VUE3中引入.env下的環(huán)境變量,顯示process未定義問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項目是一個普通的Vue3應用，相比基于Vue-cli創(chuàng)建的應用少了很多配置文件和依賴，下面基于Vite相關資料內容，需要的朋友可以參考一下2022-02-02
在Vue應用中,跨標簽頁的通信通常涉及到兩個或多個瀏覽器標簽頁之間的信息共享,由于每個標簽頁或窗口都是獨立的JavaScript執(zhí)行環(huán)境,它們不能直接通過Vue或其他JavaScript庫來直接相互通信,但是,有一些方法可以實現(xiàn)這種跨標簽頁的通信,以下是一些常用的跨標簽頁通信方法2025-03-03