一、混入mixins
一个包含组件选项的对象数组（可复用），这些选项都将被混入到当前组件的实例中
属性相同时，原组件中的属性会覆盖混入的属性。
vue2多使用
作用：将组件公共的数据方法和生命周期函数提取出来，封装到一个独立对象中，被其它所有组件共享。
实现：
1.MyMixins.js定义混入对象（1.定义混入对象 2.在vue组件中通过mixins选项接收要混入的对象数组 3.使用）
export const mixins1 = {
data() {
return {
message:'这是混入的message'
}
},
methods: {
plus(){
console.log('这是混入的plus >>>>')
}
},
}
2.App.js引入接收使用
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过滤器
注册：Vue.filter(过滤器名称,过滤器函数)
调用: <p>{{ 参数|过滤器名称 }}</p>
<!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>
