组件:就是自定义标签, 也是Vue的实例对象;
组件好处:就像工作分工,函数封装等
组件分为全局组件和局部组件;
全局组件,在Vue身上的组件,所有的vue挂载的元素内都可以使用;正是因为这一点,component的data必须是一个函数,绑定的变量 都会去执行data函数,然后找data里的返回的对象的k,如果没有,就继续找computed里的看,
1 <body> 2 <div id="app"> 3 <my-component></my-component> 4 </div> 5 <div id='app1'> 6 <my-component></my-component> 7 </div> 8 9 <script> 10 Vue.component('my-component',{ 11 template:`<div> 12 {{val1}} //每次都会先找data函数里的值,如果没有找computed里的值 13 </div>`, 14 data:function(){ 15 console.log(111) //先输出111,证明每个绑定的变量都会导致data执行,return出来一个新的值 16 return { 17 val:'hello world' 18 } 19 }, 20 computed:{ 21 val1:function(){ 22 console.log(222) //再执行输出222, 23 return '你是我的' 24 } 25 }, 26 }) 27 var vm = new Vue({ 28 el:'#app', 29 }) 30 var vm1 = new Vue({ 31 el:"#app1" 32 }) 33 </script>