component -- 組件深入 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 組件的深入 ~~~ 1.因為組件是可復用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實例特有的選項和data中組件用的是返回值。 2.組件都是獨立的有自己的生命周期。 3.組件可以嵌套組件。 4.子組件的作用域是自己本身，簡單的說父組件中data和子組件中data名字相同，子組件只會找自己的data不會找父組件data。 5.子組件可以看做一個單獨的個體使用的使用也是子組件這個單獨的個體在使用。 6.template 下面只能有一個根節點，想有多個就給使用v-show 或者v-if 6.下面案例都使用局部組件，局部組件和全局組件只是注冊方式不同其余相同。 ~~~ >[info] ## 組件data和實例data使用不同 ~~~ 1.組件中的data 不是一個對象，而是一個方法，且是方法的返回值 2.組件中的data是一個方法的原因是，為了讓同一個組件的data解耦，如果組件中的data和實例中使用方式一樣，就會出現一個頁面調用兩個相同組件，相同組件data指向同一個內存地址，就會一個變其他都跟著變的效果 3.所以會遇到一些問題例如為什么組件中的 data 必須是一個函數，然后 return 一個對象，而 new Vue 實例里，data 可以直接是一個對象？因為組件是用來復用的，JS 里對象是引用關系，這樣作用域沒有隔離，而 new Vue 的實例，是不會被復用的，因此不存在引用對象的問題。 ~~~ >[danger] ##### 組件中未使用方法返回data * 點擊按鈕相同組件中data會一起變化 ![](https://box.kancloud.cn/c786665487f5f583e0d3f4239409148f_61x254.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> <my-Com></my-Com> <my-Com></my-Com> </div>  <template id="my-com"> <div> <button @click="addCount">點擊</button> <h6>{{count}}</h6> </div> </template> <script> // 創建共享對象 let dataObj = { count: 0 } // 創建變量對象 let myCom = { template:'#my-com', data:function () { return dataObj }, methods:{ addCount(){ this.count++; }, }, }; var vm = new Vue({ el: '#app', data:{ msg:"ssss" }, components:{ // 在外部聲明變量，使用代碼簡潔 myCom, } }); </script> </body> </html> ~~~ >[danger] ##### 組件中data的正確寫法 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div>  <template id="my-com"> <h1>{{title}}</h1> </template> <script> // 創建變量對象 let myCom = { template:'#my-com', data:function () { return{ title:'我是子組件打的標題' } } }; var vm = new Vue({ el: '#app', data:{ msg:"ssss" }, components:{ // 在外部聲明變量，使用代碼簡潔 myCom, } }); </script> </body> </html> ~~~ >[info] ## 組件嵌套 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div>  <template id="my-com"> <div> <h6>{{title}}</h6> <my-Com2></my-Com2> </div> </template> <script> let myCom2 = { template:'<h4>組件二號</h4>', } // 創建變量對象 let myCom = { template:'#my-com', data:function () { return { title:'組件一號' } }, components:{ // 在外部聲明變量，使用代碼簡潔 myCom2, } }; var vm = new Vue({ el: '#app', components:{ // 在外部聲明變量，使用代碼簡潔 myCom, } }); </script> </body> </html> ~~~