组件：由 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模板中渲染该局部组件
<!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模板中直接渲染该全局组件
<!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实例成员获得自定义属性
一、组件的构造 组件：由 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) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
<!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>