Vue 自定义插件demo

vue

1.新建plugins.js文件

(function () {

const MyPlugin = {}

MyPlugin.install = function (Vue, options) {

// 1. 添加全局方法或 property

Vue.myGlobalMethod = function () {

// 逻辑...

alert('全局方法被调用-myGlobalMethod');

}

// 2. 添加全局指令

Vue.directive('my-directive', {

bind(el, binding, vnode, oldVnode) {

// 逻辑...

},

inserted(el, binding) {

el.innerHTML = 'MyPlugin.install-my-directive指令被调用了' + binding.value

}

})

// 3. 注入组件选项

Vue.mixin({

created: function () {

// 逻辑...

}

})

// 4. 添加实例方法

Vue.prototype.$myMethod = function (value) {

// 逻辑...

alert("VUE 实例方法被调用了" + value)

}

}

window.MyPlugin = MyPlugin

})()

  2. 调用插件

<!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>Document</title>

</head>

<body>

<div >

<p v-my-directive="content"></p>

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script src="./plugins.js"></script>

<script>

//1. 引入插件

Vue.use(MyPlugin)

var vm=new Vue({

el:'#app',

data:{

content:'hello'

}

})

//调用插件中的实例方法

vm.$myMethod('test')

//调用全局反复,注意是Vue进行调用,不是vm

Vue.myGlobalMethod()

</script>

</body>

</html>

以上是 Vue 自定义插件demo 的全部内容, 来源链接: utcz.com/z/379462.html

回到顶部