mixin混入,插槽,过滤器

本文深入探讨Vue.js的Mixins混入技术,介绍如何优化代码复用,详解nextTick方法解决DOM更新同步问题,以及插槽和作用域插槽的灵活运用,包括数据从子组件传递到父组件的方法。同时,覆盖了全局和局部过滤器的创建和应用,帮助开发者掌握Vue.js的高级特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. Mixins混入:把各个组件下相同的js部分提取出来,分发给每一个用到的组件,这样可以减少代码量进行优化,但是分发到各个组件下的数据都是相互独立的

    在组件下引入混入的内容:import minxi

    在子组件内先引入
    import mixis from ‘./…/…/…/mixin’

    然后派发 mixins:[mixis] (mixis为提出来的公共部分的js文件)

  2. nextTick(()=>{}): vue在方法下去改动data下的值之后,在方法中不能够直接取到改变过后的值,而拿到的是data下声明的初始值,需要通过使用$nextTick方法取到改变后的值

    如:this.$nextTick(()=>{  
              this.msg1="hello vue"
          })
    
  3. 插槽:在子组件调用处的中间插入HTML的内容,叫做插槽

    <ChildA>中间插入的内容就是插槽</ChildA>
    
    • 具名插槽:在子组件分发插槽处,寻找父组件对应的插槽名字,把相应的HTML内容渲染到子组件中,注意HTML结构,如果不写名字,默认名字为default

      在父组件下:
      <ChildA>
      <template v-slot:header>//此处header为插槽的名字
          <h1>Here might be a page title</h1>
        </template>
      </ChildA>
      
      在子组件下:
       <slot name="header"></slot>
      
    • 作用域插槽:子组件的数据传递给父组件时,使用作用域插槽

      在父组件下:
      
      <ChildA>
        <template #:default="slotProps">
          <ul>
            <li v-for="item of slotProps.list" :key="item">{{item}</li>
          </ul>
        </template>
      </ChildA> 
      
      在子组件下:
      <slot v-bind:list="list"></slot>
      data() {
          return { 
              list:["HTML",'CSS',"JS"]
           		};
        		}
      v-slot #缩写
      
  4. 过滤:

    • 全局过滤器:(main.js)下:Vue.filter(“cap”.回调函数return)

      Vue.filter('cap',function(v){
        console.log(v)
        return v.toUpperCase()//返回大写
      })
      
      <!-- 在双花括号中 -->
      {{ message | cap}}//message为data()下定义的
      
      <!-- 在 `v-bind` 中 -->
      <div v-bind:id="rawId | formatId"></div>
      
      过滤器可以串联:
      
      {{ message | filterA | filterB }}
      
    • 局部过滤器:(组件下) :

      Vue.filters:{

      过滤器名字:回调函数

      }

      data(){},
        filters:{
            chart:function(v) {
              return v.charAt(1)
            }
          }
      }
      
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值