VUE混合mixins
把公共的部分抽取出来放到一个类中
调用: mixins: [类名]
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混合mixins</title>
</head>
<body>
<div id="app">
<popup></popup>
<tooltip></tooltip>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
JS
var base = {
data: function () {
return {
visible: false,
}
},
methods: {
show: function () {
this.visible = true
},
hide: function () {
this.visible = false
},
toogle: function () {
this.visible = !this.visible
}
}
}
Vue.component('tooltip', {
template: '<div><span @mouseenter="show" @mouseleave="hide">bys</span><div v-if="visible">白岩松</div></div>',
mixins: [base]
})
Vue.component('popup', {
template: '<div><button @click="toogle">Popup</button><div v-if="visible"><span @click=hide>X</span><h4>标题</h4>内容内容内容内容内容内容内容内容内容内容内容内容</div></div>',
mixins: [base],
data: function () {
return {
visible: true,
}
},
})
var app = new Vue({
el: '#app',
data: {
}
})