组件：一个包含Html,css,js独立的集合体，这样的集合体可以完成页面结构的代码复用 可以相对于理解成封装承一个小模块，能够重复方便使用.
组件分为 根组件，全局组件，局部组件
根组件: 所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会有一个根组件
全局组件： 不用注册，就可以称为任何一个组件的子组件
局部组件： 必须注册，才可以称为注册该局部组件的子组件
局部组件
创建一个局部组件
1.创建局部组件
2.在父组件中注册该局部组件
3.在父组件的template模板中渲染该局部组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <!--<mcc></mcc>--> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 创建一个局部组件 // 1) 创建局部组件 // 2) 在父组件中注册该局部组件 // 3) 在父组件的template模板中渲染该局部组件 let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤马叉虫</p> </div> ` }; new Vue({ el: '#app', components: { // mcc: localTag, // localTag, 'local-tag': localTag, } }) </script> </html>
全局组件
1.创建全局组件
2.在父组件的template模板中直接渲染该全局组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> </div> </body> <script src="js/vue.js"></script> <script> // 1) 创建全局组件 // 2) 在父组件的template模板中直接渲染该全局组件 Vue.component('global-tag', { template: ` <div class="box" @click="action"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤{{ num }}</p> </div> `, data () { return { num: 0 } }, methods: { action() { this.num++; } } }); // 数据局部化分析导入 // a = function () { // return {num: 10} // }; // b1 = a(); // b2 = a(); // b3 = a(); new Vue({ el: '#app', }) </script> </html>
组件交互-父传子
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .info { text-align: center; width: 200px; padding: 3px; box-shadow: 0 3px 5px 0 pink; float: left; margin: 5px; } .info img { width: 200px; } </style> </head> <body> <div id="app"> <info v-for="info in infos" :key="info.image" :myinfo="info"></info> </div> </body> <script src="js/vue.js"></script> <script> // 伪代码：模拟数据从后台请求 /* let infos = ''; document.onload = function () { $.ajax({ url: '/images/', type: 'get', success (response) { infos = response.data } }) }; */ let infos = [ { image: 'img/001.png', title: '小猫' }, { image: 'img/002.png', title: '蛋糕' }, { image: 'img/003.png', title: '蓝糕' }, { image: 'img/004.png', title: '恶犬' }, ]; let info = { template: ` <div class="info"> <img :src="myinfo.image" alt=""> <p><b>{{ myinfo.title }}</b></p> </div> `, props: ['myinfo'] }; // 数据交互 - 父传子 - 通过绑定属性的方式 // 1) 父组件提供数据 // 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供 // 3) 在子组件实例中，通过props实例成员获得自定义属性 new Vue({ el: '#app', components: { info, }, data: { infos, } }) </script> </html>
解析：1.后台传到前台数据 infos 在根组件data中声明并赋值
2.<div id="app">
<info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
子标签中通过 v-for 循环遍历父组件传来的infos数据，并将遍历出来的info通过 :myinfo传入子组件中
3.子组件中通过props:['myinfo'] 成员将遍历出来的Info数据拿到 并渲染到template中,之后再依次渲染并传到根标签<info>中
组件交互-子传父
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .close:hover { cursor: pointer; color: red; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="userMsg"> <button @click="sendMsg">留言</button> </p> <ul> <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li> </ul> </div> </body> <script src="js/vue.js"></script> <script> let msgLi = { template: ` <li> <span class="close" @click="deleteMsg(index)">x </span> <span>第{{ index + 1 }}条：</span> <span>{{ msg }}</span> </li> `, props: ['msg', 'index'], methods: { // 系统的click事件 deleteMsg(i) { // $emit('自定义事件名', 参数们) this.$emit('remove_msg', i); this.$emit('myclick', 1, 2, 3, 4, 5) } } }; // 组件交互-子传父 // 1) 数据由子组件提供 // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数 new Vue({ el: '#app', data: { msgs: [], userMsg: '' }, methods: { sendMsg() { if (this.userMsg) { this.msgs.push(this.userMsg); this.userMsg = ""; } }, removeAction(i) { this.msgs.splice(i, 1) } }, components: { msgLi } }) </script> </html>
解析：1.数据由子组件提供
2.子组件内部通过触发系统事件 this.$emit('自定义事件名',参数) 发送一个自定义事件，将数据携带出来
3.子组件再通过子组件标签中用@自定义事件名=“再次定义事件名” 传入父组件中，父组件通过此再次定义的事件名与其携带的参数，用methods成员拿到
参数并对其进行处理