Vue Component

component

• Props：

  • is - string | Component | VNode

• 用法：

  渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。is 的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。

  <!--  动态组件由 vm 实例的 `componentId` property 控制 -->
  <component :is="componentId"></component>
  
  <!-- 也能够渲染注册过的组件或 prop 传入的组件-->
  <component :is="$options.components.child"></component>
  
  <!-- 可以通过字符串引用组件 -->
  <component :is="condition ? 'FooComponent' : 'BarComponent'"></component>
  
  <!-- 可以用来渲染原生 HTML 元素 -->
  <component :is="href ? 'a' : 'span'"></component>

   

   

  例:

  <template>
    <div>
      <br>
      <br>
      <br>
      <el-button @click="runCount">刷新组件-{{ count }}</el-button>
      <br>
      {{ form[componentName] }}
      <br>
      <el-alert
        title="动态组件"
        type="success"
      >
        <component :is="componentName" v-model="form[componentName]" v-bind="attrs"> {{ componentName }}</component>
      </el-alert>
      <br>
      <br>
      <el-alert
        title="组件"
        type="success"
      >
        {{ names }}
      </el-alert>
      <el-alert
        title="type属性"
        type="success"
      >
        <el-input v-model="attrs.type" :width="150" />
      </el-alert>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {},
        count: 0,
        attrs: { type: 'success' },
        names: ['el-button', 'el-input', 'el-tag', 'el-slider', 'el-time-picker']
      }
    },
    computed: {
      componentName() {
        return this.names[this.count]
      }
    },
    methods: {
      runCount() { // 获取随机数
        this.count = parseInt(Math.random() * ((this.names.length - 1) - 0 + 1) + 0, 10)
      }
    }
  }
  </script>
  
  <style>
  
  </style>