vue2、vue3区别之混入mixins和过滤器filter

RONIN2026-04-20 17:47

一、混入mixins

一个包含组件选项的对象数组（可复用），这些选项都将被混入到当前组件的实例中

属性相同时，原组件中的属性会覆盖混入的属性。

vue2多使用

作用：将组件公共的数据方法和生命周期函数提取出来，封装到一个独立对象中，被其它所有组件共享。

实现：

1.MyMixins.js定义混入对象（1.定义混入对象 2.在vue组件中通过mixins选项接收要混入的对象数组 3.使用）

javascript 复制代码

export const mixins1 = {
  data() {
      return {
          message:'这是混入的message'
      }
  },

  methods: {
      plus(){
          console.log('这是混入的plus >>>>')
      }
  },
}

2.App.js引入接收使用

javascript 复制代码

import { mixins1 } from "./mixins/MyMixins.js";

export default {
  mixins: [mixins1],

  data() {
    return {
      title: "混入技术",
      vcolor: "red",
      message:'这是组件app中message'
    };
  },

  methods: {
    bindUpdateColor() {
      this.vcolor = "blue";
    },
  },

  /*html*/

  template: `<div>
                <h2>{{title}}</h2>
                <p>{{ message }}</p>
                <button @click="plus">确定</button>
            </div>
            `,
};

二、过滤器filter

全局方法，本质是一个函数。

vue2中使用，vue3没有filter过滤器

调用: <p>{{ 参数|过滤器名称 }}</p>

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- <script src="./vue.js"></script> -->
</head>

<body>
    <div id="app"></div>
    <script>
        const root = {
            el:'#app',
            data: {
                title: '过滤器'
            },

            /*html 调用*/
            template:`<div>
                    {{title}}
                    <p>{{ title|msgFilter }}</p>  
                 </div>`
        }

         //注册
         Vue.filter('msgFilter',(t)=>{
            const data =  new Date()
            return data.toLocaleTimeString()
        })

        // 创建vue实例
        new Vue(root)
    </script>
</body>
</html>