vue slot 插槽备忘2

在用vant组件库时候, 如van-field时候如果想在组件中插入值,可以用到v-slot

实现了输入框左侧放置小图标效果

<van-field
            v-model="phone"
            placeholder="请输入手机号"
            v-show="isNew"
          >
            <template v-slot:left-icon>
              <div class="userAccount"></div>
            </template>
          </van-field>

v-slot 是vue2.6新加入 具名插槽 slot="left-icon"

借此 复习下slot 插槽的知识

 slot可以在父组件中 在调用子组件标签传值 子组件会接到传值

如

父组件DoctorRegister.vue

<text-info @agreeHandle="agreeHandle">
        <template v-slot:header>222</template>
        <template slot-scope="slotProp">
          <div>
           {{slotProp.user.name}}
          </div>
        </template>
      </text-info>

 子组件 TextInfo.vue

<slot :user="user">{{user.name}}</slot>
<slot name="header"></slot>

子组件可以把user的属性 传递给父组件