Vue的plugins插件

最新推荐文章于 2024-07-20 11:10:42 发布

曾燕辉

最新推荐文章于 2024-07-20 11:10:42 发布

阅读量737

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yh_zeng2/article/details/124195344

版权

vue 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文展示了如何创建并使用一个Vue.js全局插件，包括定义全局过滤器、混合以及实例方法。在main.js中引入插件，并在SchoolCom和StudentCom组件中应用了过滤器和实例方法。StudentCom组件还展示了如何调用全局方法。

摘要由CSDN通过智能技术生成

插件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>