form-create はどのようにして vue コンポーネントを動的に生成しますか? (コード例)-jsチュートリアル-php.cn

form-create はどのようにして vue コンポーネントを動的に生成しますか? (コード例)

不言

リリース： 2019-01-18 10:28:51

転載

3510 人が閲覧しました

この記事の内容は、form-create がどのように vue コンポーネントを動的に生成するかについてです。 (コードサンプル) は、参考にしていただければ幸いです。

Example

form-create はどのようにして vue コンポーネントを動的に生成しますか? (コード例)

let rule = [
  {
    type:&#39;row&#39;,
    children:[
      {
        type:&#39;i-col&#39;,
        props:{
          span:12
        },
        children:[
          formCreate.maker.input(&#39;商品名称&#39;,&#39;goods_name&#39;,&#39;iphone&#39;),
          formCreate.maker.number(&#39;商品加个&#39;,&#39;goods_price&#39;,8688)
        ]
      },
      {
        type:&#39;i-col&#39;,
        props:{
          span:12
        },
        children:[
          formCreate.maker.dateTime(&#39;创建时间&#39;,&#39;create_at&#39;),
          formCreate.maker.radio(&#39;是否显示&#39;,&#39;is_show&#39;).options([
            {value:1,label:&#39;显示&#39;},
            {value:0,label:&#39;不显示&#39;}
          ])
        ]
      }
    ]
  }
]

ログイン後にコピー

maker.create

仮想 DOM を作成してカスタムコンポーネントを生成する

Generate

Maker

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

ログイン後にコピー

上記のコードは、maker ジェネレーターを使用して、読み込み中の iview ボタンコンポーネント

Json

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

ログイン後にコピー

# を動的に生成します。 ## 上記のコードは、

json#Modification

を通じて

iview

ボタンコンポーネントを動的に生成します。次の 2 つのメソッドを使用して動的に変更する方法コンポーネントの設定項目

rule

rule[0].props.loading = false;

ログイン後にコピー

を通じてコンポーネント生成ルールを変更します

$f.component()メソッドを通じてコンポーネント生成ルールを取得し、変更します

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

ログイン後にコピー

maker.template

テンプレートを使用してカスタムコンポーネントを生成します。

maker.createTmp メソッドはこのメソッドのエイリアスです

Generate

Maker

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

ログイン後にコピー

上記のコードは、

maker ジェネレーターを使用して、読み込み中の iview ボタンコンポーネント

Json

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

ログイン後にコピー

The上記のコードは、

Json メソッドを介して iview ボタンコンポーネントを動的に生成します。

Modification

は 2 つの方法で動的に変更できます

vm コンポーネント内の

は、

rule を介してカスタムコンポーネントの vm を取得し、$f を介して

rule[0].vm.text = &#39;加载完毕&#39;;
rule[0].vm.loading = false;

ログイン後にコピー

を変更します。 Component() メソッドは、カスタムコンポーネントの vm を取得し、

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

ログイン後にコピー

を変更します。

以上がform-create はどのようにして vue コンポーネントを動的に生成しますか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。