插件plugins.js:
export default {
install(Vue){
//定义全局过滤器
Vue.filter("mySlice", function(value){
return value.slice(0,5)
});
//定义全局混合
Vue.mixin({
data: function(){
return {
x:100,
y:200
}
}
});
Vue.prototype.hello=()=>{alert("你好啊!")}
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import plugins from "./plugins"
Vue.use(plugins)
new Vue({
render: h => h(App),
}).$mount('#app')
SchoolCom.vue
<template>
<div>
<h1>学校名字:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
</div>
</template>
<script>
export default {
name: "SchoolCom",
data: function(){
return {
name: "深圳大学",
address: "深圳"
}
},
}
</script>
StudentCom.vue
<template>
<div>
<h1>{{msg | mySlice}}</h1>
<h1>学生名字:{{name}}</h1>
<h1>学生年龄:{{age}}</h1>
<button @click="showHello">点我显示hello</button>
</div>
</template>
<script>
export default {
name: "StudentCom",
data: function(){
return {
msg: "我是学生啊混合",
name: "张三",
age: 18
}
},
methods:{
showHello: function(){
this.hello()
}
}
}
</script>
App.vue
<template>
<div>
<img src="./assets/logo.png"/>
<hr>
<StudentCom></StudentCom>
<hr>
<SchoolCom></SchoolCom>
</div>
</template>
<script>
import StudentCom from "./components/StudentCom"
import SchoolCom from "./components/SchoolCom"
export default {
name: "App",
components:{
StudentCom: StudentCom,
SchoolCom: SchoolCom
}
}
</script>