一、介绍：
1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
2) 分组分为根组件、全局组件与局部组件
根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件 ；
全局组件：不用注册，就可以成为任何一个组件的子组件 ；
局部组件：必须注册，才可以成为注册该局部组件的子组件 。
3) 每一个组件都有自身的html结构，css样式，js逻辑
每一个组件其实都有自己的template，就是用来标识自己html结构的 ；
template模板中有且只有一个根标签 ；
根组件一般不提供template，就由挂载点的真实DOM提供html结构。
二、组件：
1、根组件
在Vue内增 template：·<div> </div>·
2、局部组件
1）创建局部组件
2）在父组件中注册该局部组件
3）在父组件中的template模板中渲染该局部组件
</head> <body> <div id="app"> <!--<mcc></mcc>--> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 渲染 let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>title</h3> <p>text</p> </div> ` }; new Vue({ el: '#app', components: { // 注册 // mcc: localTag, // localTag, 'local-tag': localTag, } }) </script>
3、全局组件
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>
三、组件交互
1、父传子
// 数据交互 - 父传子 - 通过绑定属性的方式 // 1) 父组件提供数据 // 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供 // 3) 在子组件实例中，通过props实例成员获得自定义属性
<style> .info { text-align: center; 200px; padding: 3px; box-shadow: 0 3px 5px 0 pink; float: left; margin: 5px; } .info img { 200px; } </style> <div id="app"> <!-- 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供 --> <info v-for="info in infos" :key="info.image" :myinfo="info"></info> </div> <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> `, // 3) 在子组件实例中，通过props实例成员获得自定义属性 props: ['myinfo'] }; new Vue({ el: '#app', components: { info, }, data: { infos, // 1) 父组件提供数据 } }) </script>
2、子传父
// 组件交互-子传父 // 1) 数据由子组件提供 // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
<style> .close:hover { cursor: pointer; color: red; } </style> <div id="app"> <p> <input type="text" v-model="userMsg"> <button @click="sendMsg">留言</button> </p> <ul> <!-- 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 --> <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li> </ul> </div> <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) { // 1) 数据由子组件提供 // $emit('自定义事件名', 参数们) this.$emit('remove_msg', i); } } }; new Vue({ el: '#app', data: { msgs: [], userMsg: '' }, methods: { sendMsg() { if (this.userMsg) { this.msgs.push(this.userMsg); this.userMsg = ""; } }, // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数 removeAction(i) { this.msgs.splice(i, 1) } }, components: { msgLi } }) </script>