需求是这样的，如图
点击禁用后，变成启用，但是结果却不让人满意
我们先来看一下错误代码：
//conponet控件里的内容
html内容：
<div>
<button @click.stop="isUse=!isUse" v-show="isUse">
启用
</button>
<button @click.stop="isUse=!isUse" v-show="!isUse">
禁用
</button>
</div>
javascript内容：
<script>
export default {
created(){
},
data() {
return {
date: "",
isUse: true
}
}
</script>
解析错误：vue比较好的就是数据驱动，最后发现我们两个button里公用了一个data对象，return的是同一个对象；
你的误解：我看过官网这段代码 基础--组件--data必须是函数
//注册全局组件my-componet
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
// 但是我们返回给每个组件的实例的却引用了同一个data对象
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
//html页面内容 调用组件
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
结果为
而并非为
这个时候我就觉得return返回的对象是一个全新的对象，所以才会产生上面的错误
我们来探讨一下，return返回的对象是否是一个全新的data
答案为：
调用一次组件my-component只会生成一个data 调用两次会生成两个data
欢迎初学者vue的小伙伴一起讨论，不限于这个问题！