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的屬性 傳遞給父組件