首页 > 其他 > 详细

vue-插件开发

时间:2020-04-09 14:28:05      阅读:52      评论:0      收藏:0      [点我收藏+]

vue插件开发是使用过程中不可缺少的一项,可以提高开发效率,减少重复开发,下面就是插件开发的几个步骤:

首先在src下新建plugin文件夹,下面新建toast.vue和toast.js文件

testToast.vue文件代码
<template>
  <div>
    <p class="rtoast" v-if="show">{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: "test-toast",
  data() {
    return {
      msg: "hello,world",
      show: false
    };
  },
  methods: {
    toastShow() {
      this.show = true;
    }
  }
};
</script>
<style>
.rtoast {
  width: 200px;
  height: 100px;
  text-align: center;
}
</style>

  

testToast.js文件代码
import testToast from ‘./testToast.vue‘
let test = {}
test.install = function (Vue) {
    Vue.prototype.$message = ‘Hello I am test.js‘
    Vue.prototype.$Method = function (arr) {
        return ‘成功调用‘
    }
    Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
}
export default test
mian.js引入,装载
import test from ‘./plugin/testToast.js‘
Vue.use(test)

然后在其他组件中引入使用

只需要在模板中插入:

 <test-toast ></test-toast>

vue-插件开发

原文:https://www.cnblogs.com/wmydb/p/12666379.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!