mixin混入，插槽，过滤器

最新推荐文章于 2023-09-05 14:38:28 发布

一路向北@L

最新推荐文章于 2023-09-05 14:38:28 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_40944918/article/details/102671423

Vue 专栏收录该内容

16 篇文章

订阅专栏

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

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

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

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

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

然后派发 mixins:[mixis] （mixis为提出来的公共部分的js文件)
nextTick(()=>{}): vue在方法下去改动data下的值之后，在方法中不能够直接取到改变过后的值，而拿到的是data下声明的初始值，需要通过使用$nextTick方法取到改变后的值
```
如：this.$nextTick(()=>{  
          this.msg1="hello vue"
      })
```

插槽:在子组件调用处的中间插入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 #缩写

过滤：

全局过滤器：（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)
      }
    }
}