mixins混入实际意义:
mixins 是vue.js的一个选项,接受一个混入对象的数组
意义:将组件的选项抽离出去,单独管理,复用
- 有两种使用形式
- 局部混入
- 全局混入
局部混入
<html>//html示例代码块
<div id="app">
<button @click="add">add</button>
</div>
</html>
//正常定义事件方法
new Vue({
el:'#app',
methods:{
add(){
alert('你好')
}
}
})
//mixins局部混入写法
<script>
var mixinObj = { //组件抽离单独写出
methods: {
add () {
console.log ( '你好' )
}
}
}
new Vue({
el:'#app',
mixins:[ mixinObj ],//通过mixins选项局部混入
methods:{
add () { // 如果实例中方法名和mixins中的方法名相同,那么实例中的触发
console.log( '实例中add' )
}
}
})
</script>
//全局混入
<body>
<div id="app">
<button @click = "add"> add </button>
</div>
</body>
<script>
/*
全局的混入 : Vue.mixin({}) 直接添加在Vue构造函数上 ,所以创建的实例会自动携带mixins内的函数,
所以所有new Vue 的实例都会携带mixins内的方法,因此不建议使用全局混入的方法。
*/
Vue.mixin({
methods: {
add () {
alert ( 'add' )
}
}
})
new Vue({
el: '#app',
data: {},
})
</script>