vue中slot简单用法

父页面调用子页面

<div v-loading="loading">

    <test :obja="obja">
      <template slot="a" slot-scope="{scope}">
       {{scope.value1}}
        {{scope.value2}}
        {{scope.value3}}
      </template>
      <template v-slot:c="{scope}">
        {{scope.value1}}
      </template>
    </test>
  </div>
  export default {
data() {
    return {
      obja: {
        moldType: 'el-input',
        placeholder: 'sdfsdf',
        width: '200px'
      }
  }
}

子组件test

 <div>
    <slot>
      自动展示-input输入框
      <component :is="obja.moldType" v-bind="obja"></component>
    </slot>
    <slot name="a" :scope="{value1:'111',value2:'222',value3:'333'}"></slot>
    <slot name="c" :scope="{value1:'111'}">cc</slot>

  </div>

页面展示