组件:由 template + css + js 三部分组成(.vue文件)
-
1)组件具有复用性
- 2) 复用组件时,数据要隔离
-
3) 复用组件时,方法不需要隔离,因为方法使用隔离数据就可以产生区别
组件介绍
1) 组件:一个包含html、css、js独立的集合体,这样的集合体可以完成页面解构的代码复用
2) 分组分为根组件、全局组件与局部组件
根组件:所有被new Vue()产生的组件,在项目开发阶段,一个项目只会出现一个根组件
全局组件:不用注册,就可以成为任何一个组件的子组件
局部组件:必须注册,才可以成为注册该局部组件的子组件
3) 每一个组件都有自身的html结构,css样式,js逻辑
每一个组件其实都有自己的template,就是用来标识自己html结构的
template模板中有且只有一个根标签
根组件一般不提供template,就由挂载点的真实DOM提供html结构
4) 除根组件的其他组件,数据要有局部作用域,保证组件复用时,各组件间数据的独立性
5) 在多组件共处时,在哪个组件模板中出现的变量,有当前组件组件提供
1) 创建局部组件
2) 在父组件中注册该局部组件
3) 在父组件的template模板中渲染该局部组件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>局部组件</title> </head> <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> <body> <div id="app"> <!--3.组件渲染--> <local-tag></local-tag> <local-tag></local-tag> </div> <script src="js/vue.js"></script> <script> // 1.创建组件 let localTag = { template: ` <div class="box"> <img src="img/333.jpg" alt=""> <h3>橘猫</h3> <p>大橘为重</p> </div> ` }; new Vue({ el: '#app', // 2.注册组件 components: { // mcc: localTag, // localTag, 'local-tag': localTag, } }) </script> </html>
1) 创建全局组件
2) 在父组件的template模板中直接渲染该全局组件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局组件</title> </head> <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> <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> // 创建组件 Vue.component('global-tag', { template: ` <div class="box" @click="action"> <img src="img/333.jpg" alt=""> <h3>橘猫</h3> <p>大橘为重{{ num }}</p> </div> `, data () { return { num: 0 } }, methods: { action() { this.num++; } } }); new Vue({ el: '#app', }) </script> </html>
数据交互 - 父传子 - 通过绑定属性的方式
1) 父组件提供数据
2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供
3) 在子组件实例中,通过props实例成员获得自定义属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
一、组件的构造 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不需要隔离,因为方法使用隔离数据就可以产生区别 组件介绍 1) 组件:一个包含html、css、js独立的集合体,这样的集合体可以完成页面解构的代码复用 2) 分组分为根组件、全局组件与局部组件 根组件:所有被new Vue()产生的组件,在项目开发阶段,一个项目只会出现一个根组件 全局组件:不用注册,就可以成为任何一个组件的子组件 局部组件:必须注册,才可以成为注册该局部组件的子组件 3) 每一个组件都有自身的html结构,css样式,js逻辑 每一个组件其实都有自己的template,就是用来标识自己html结构的 template模板中有且只有一个根标签 根组件一般不提供template,就由挂载点的真实DOM提供html结构 4) 除根组件的其他组件,数据要有局部作用域,保证组件复用时,各组件间数据的独立性 5) 在多组件共处时,在哪个组件模板中出现的变量,有当前组件组件提供 二.template的使用 1.局部组件 局部组件可以分三步 1) 创建局部组件 2) 在父组件中注册该局部组件 3) 在父组件的template模板中渲染该局部组件 局部组件 2.全局组件 1) 创建全局组件 2) 在父组件的template模板中直接渲染该全局组件 全局组件 3.组件交互-父传子 数据交互 - 父传子 - 通过绑定属性的方式 1) 父组件提供数据 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供 3) 在子组件实例中,通过props实例成员获得自定义属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue导入</title> </head> <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> <body> <div id="app"> <!-- 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供 --> <info v-for="info in infos" :key="info.image" :myinfo="info"></info> </div> </body>> <script src="js/vue.js"></script> <script> let infos = [ { image: 'img/111.jpg', title: '肥猫' }, { image: 'img/333.jpg', title: '瞅你咋地' }, { image: 'img/444.jpg', title: '红胖纸' }, { image: 'img/555.jpg', 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> </html> 4.组件交互-子传父
组件交互-子传父
1) 数据由子组件提供
2) 子组件内部通过触发系统事件,发送一个自定义事件,将数据携带出来
3) 父组件位子组件标签的自定义属性通过方法实现,就可以通过参数拿到子组件传递处理的参数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子传父</title> </head> <style> .close:hover { cursor: pointer; color: red; } </style> <body> <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> </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) { // 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> </html>