Vue动态组件component的深度使用说明

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>

<el-form ref="form" :model="form" label-width="80px">
  <my-form-item
                label="活动名称"
                v-model="form.name"
                widget="input"></my-form-item>
  <my-form-item 
                label="活动区域" 
                v-model="form.region" 
                placeholder="请选择活动区域"
                widget="select"
                :options="options"></my-form-item>
</el-form>

  <el-form-item :label="title">
    <el-select v-if="widget === 'select'" v-model="form[path]" :clearable="true">
      <el-option v-for="option in options" :key="option.code" :label="option.name" :value="option.code"></el-option>
    </el-select>
    <el-input v-else-if="widget === 'input'" v-model="form[path]" :clearable="true"></el-input>
  </el-form-item>

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!--    <HelloWorld msg="Welcome to Your Vue.js App" />-->
 
    <a href="#" @click="current = 'hello-world'">Hello World</a>
    <a href="#" @click="current = 'hello-world2'">Hello 2</a>
    <component :is="current" :msg="current" @clicked="handleClicked"></component>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '../components/HelloWorld.vue';
import HelloWorld2 from '../components/HelloWorld2';
 
export default {
  name: 'Home',
  components: {
    HelloWorld,
    HelloWorld2
  },
  data() {
    return {
      current: 'hello-world'
    };
  },
  methods: {
    handleClicked(e) {
      alert(e);
    }
  }
};

  <component
    v-if="widgetType"
    :is="currentWidget"
    v-model="form[path]"
    v-bind="$props"
    :label="title"
    :property="mProperty"
  ></component>

<template>
  <el-form-item :label="label">
    <el-input :value="value" @input="handleInput"></el-input>
  </el-form-item>
</template>

<template>
  <el-form-item :label="label">
    <el-select :value="value" :clearable="true" @input="handleInput">
      <el-option
        v-for="option in widgetOptions"
        :key="option.code"
        :label="option.name"
        :value="option.code"
      ></el-option>
    </el-select>
  </el-form-item>
</template>

<template>
  <div>
     <div>动态渲染组件</div>
     <div>
     //component标签就是挂载点,  :is=绑定的组件名字
       <component :is="currentComponent"></component>
     </div>
     <button @click="btn_click()">按钮</button>
  </div>
</template>
<script>
import Tab0 from "@/components/Tab0.vue";
import Tab1 from "@/components/Tab1.vue";
export default {
  name:'About',
  data(){
    return{
      currentIndex:0
    }
  },
  components:{
    Tab0,
    Tab1
  },
  methods:{
    btn_click(){
      if(this.currentIndex==0){
        this.currentIndex=1
      }else{
        this.currentIndex = 0
      }
    }
  },
  computed:{
    currentComponent:function(){
      return `Tab${this.currentIndex}`
    }
  }
}
</script>