How does form-create dynamically generate vue components? (code example)

The content of this article is about how form-create dynamically generates vue components? (Code sample) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Example

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('创建时间','create_at'),
          formCreate.maker.radio('是否显示','is_show').options([
            {value:1,label:'显示'},
            {value:0,label:'不显示'}
          ])
        ]
      }
    ]
  }
]

maker.create

Generate custom components by creating a virtual DOM

Generate

Maker

let rule = [
  formCreate.maker.create('i-button').props({
    type:'primary',
    field:'btn'
    loading:true
  })
]
$f = formCreate.create(rule);

The above code uses the maker generator to dynamically generate a loading iview button component

Json

let rule = [
  {
    type:'i-button',
    field:'btn'
    props:{
        type:'primary',
        field:'btn',
        loading:true
    }
  }
]
$f = formCreate.create(rule);

The above code dynamically generates a iview button component through json

#Modification

You can use the following two methods Method to dynamically modify the configuration items of the component

Modify the component generation rules through rule

rule[0].props.loading = false;

Get the component generation rules through the $f.component() method and modify it

$f.component().btn.props.loading = false;

maker.template

Generate custom components through templates, maker.createTmp method is the alias of this method

Generate

Maker

let rule = [
  formCreate.maker.template(&#39;<i-button :loading="loading">{{text}}<i-button>&#39;,new Vue({
    data:{
      loading:true,
      text:&#39;正在加载中...&#39;
    }
  }))
]

The above code uses the maker generator to dynamically generate a loading iview button component

Json

let rule = [
  {
    type:'template',
    template:&#39;<i-button :loading="loading">{{text}}<i-button>&#39;,
    vm:new Vue({
      data:{
        loading:true,
        text:&#39;正在加载中&#39;
      }
    })
  }
]
$f = formCreate.create(rule);

The above code is to dynamically generate a iview button component through Json method

Modification

can be dynamically modified in two ways The value inside the vm component

gets the vm of the custom component via rule and modifies

rule[0].vm.text = '加载完毕';
rule[0].vm.loading = false;

via $f. The component() method gets the vm of the custom component and modifies

$f.component().btn.vm.text = '加载完毕';
$f.component().btn.vm.loading = false;

The above is the detailed content of How does form-create dynamically generate vue components? (code example). For more information, please follow other related articles on the PHP Chinese website!