Each component can have its own data, methods, computed and everything that you see before - like Vue instance itself.
You may have noticed a slight difference between the assembly and the Vue example: data on the property Vue instance of an object, and the data property on the component is a function. This is because you can use the component multiple times on the same page, but you may not want them to share data objects
The front end of a full set of video tutorials [] https://m.tb.cn/h.eR5xKOJ click on the link, and then select the browser fight the Guan; or Fu ASTON made after this description to ¥ 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>