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> ~~~