zoukankan      html  css  js  c++  java
  • 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的属性 传递给父组件

  • 相关阅读:
    Tableau Sheet
    Tableau Dashboard
    jQuery基础
    Tableau学习
    SQL小操作
    C#文件压缩成.Zip
    划水日记之大哥带我走渗透I
    各种推导式
    生成器表达式 (重点)
    生成器 生成器函数
  • 原文地址:https://www.cnblogs.com/junwu/p/11728780.html
Copyright © 2011-2022 走看看