每个组件都可以有自己的data、methods、computed和您之前看到的所有内容—就像Vue实例本身一样。
您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象,而组件上的数据属性是一个函数。这是因为您可以在同一个页面上多次使用组件,而且您可能不希望它们共享数据对象
【前端全套视频教程】https://m.tb.cn/h.eR5xKOJ 点击链接,再选择浏览器咑閞;或椱ァ製这段描述¥EgZvYRaMUoS¥后到><
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> <style type="text/css"> </style> </head> <body> <div id="app"> <custom-button></custom-button> <my-button></my-button> </div> <script> //全局定义组件 Vue.component('my-button',{ template:'<button v-on:click="showNumbers">this is my button {{positiveNumbers}}</button>', data(){ return { numbers:[1,-2,3,-4,-5,6] } }, computed: { //获取正数数组 positiveNumbers() { return this.numbers.filter(function(number){ if(number>0){ return number; } }); } }, methods:{ showNumbers(){ alert(this.numbers); } } }); var app = new Vue({ el: '#app', data: { isVisible:true, } }); </script> </body> </html>