【组件的使用】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>组件的使用</h1> 12 <Child1></Child1> 13 <hr> 14 <!-- 加东西用双标签（卡槽），不加东西可以用单标签<my/>--> 15 <!-- <my></my>--> 16 <my-div></my-div> 17 18 19 20 </div> 21 22 23 </body> 24 25 <script> 26 /* 27 1 使用Vue.component 定义全局组件 28 2 在组件中通过components配置项定义局部组件 29 3 局部组件只能用在组件内部 30 4 组件中的数据，事件都是独立 31 */ 32 33 //定义变量 34 let myDiv={template: ` 35 <div> 36 <img src="http://pic.imeitou.com/uploads/allimg/231128/10-23112Q54348-lp.jpg" alt=""> 37 </div> 38 `,} 39 40 //定义全局组件,有自己的html页面内容 41 Vue.component('Child1', { 42 template: ` 43 <div style="width: 200px;display: flex; justify-content: space-between;border: cornflowerblue solid 3px"> 44 <span @click="handleBack">后退</span> 45 <span>{{ title }}</span> 46 <span>前进</span> 47 <br> 48 <my-div></my-div> 49 </div>`, 50 data() { 51 //必须写函数return的形式，不然如果有共同的地方都用这个组件，有一个改变，另外一个也会改变 52 //所以用函数return的形式，每个组件都是独立的 53 return { 54 title:'Child1' 55 } 56 }, 57 methods:{ 58 handleBack(){ 59 alert('往后退') 60 } 61 }, 62 components: {myDiv} 63 }) 64 65 66 //根组件 67 var vm = new Vue({ 68 el: '#app', 69 data: {}, 70 // components:{ 71 // my:{ 72 // template: ` 73 // <div> 74 // <img src="http://pic.imeitou.com/uploads/allimg/231128/10-23112Q54348-lp.jpg" alt=""> 75 // </div> 76 // `, 77 // data(){ 78 // return {} 79 // }, 80 // methods:{} 81 // } 82 // } 83 //变量在局部使用 84 components:{myDiv} 85 }) 86 </script> 87 </html>
。
。
。
【父子通信之父传子-自定义属性】
# 1 在父组件中定义变量 data: { 'url': './img/a.jpg' } # 2 把变量传递个子组件--》myurl 自定义属性 <Child1 :myurl="url"></Child1> # 3 在子组件中，拿到属性 props:['myurl'] # 4 以后再子组件中使用属性 this.myurl
-------------------------------------------------------------------------------------------------------------------------------------------------------
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>组件的使用---父传子--自定义属性</h1> 12 <!-- 用的是全局组件里面的变量--> 13 <Child1 :myurl="url"></Child1> 19 </div> 22 </body> 23 24 <script> 25 //定义全局组件,有自己的html页面内容 26 Vue.component('Child1', { 27 template: ` 28 <div> 29 <div style="width: 200px;display: flex; justify-content: space-between;border: cornflowerblue solid 3px"> 30 <span @click="handleBack">后退</span> 31 <span @click="handleChange">{{ title }}</span> 32 <span>前进</span> 33 <br> 34 </div> 35 <div> 36 <img :src="url" alt=""> 37 </div> 38 </div>`, 39 // 子组件的props属性，接收父组件传递过来的数据 40 props: ['myurl'], 41 data() { 42 return { 43 title:'Child1', 44 url:'http://pic.imeitou.com/uploads/allimg/231127/10-23112G61428-lp.jpg' 45 } 46 }, 47 methods:{ 48 handleBack(){ 49 alert('往后退') 50 }, 51 handleChange(){ 52 this.url=this.myurl 53 } 54 }, 55 }) 56 57 58 //根组件 59 var vm = new Vue({ 60 el: '#app', 61 data: { 62 'url':'http://pic.imeitou.com/uploads/allimg/240428/10-24042Q45528-lp.jpg' 63 }, 64 }) 65 </script> 66 </html>
。
。
。
【父子通信之子传父】
# 1 在【父组件】中定义变量，用来接收子组件传入的变量 data: { text:'' }, #2 在【父组件】使用子组件时候，自定义 事件 <Child1 @myevent="handleMyEvent"></Child1> # 3 在[父组件]中定义函数，跟自定义事件绑定 handleMyEvent(childText){ this.text=childText } # 4 在【子组件中】---》触发自定义事件执行 this.$emit('自定义事件名字',this.mytext)
------------------------------------------------------------------------------------------------------------------------------------------------------------------
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>组件的使用---子传父--自定事件</h1> 12 <hr> 13 <Child1 @myevent="handleEvent"></Child1> 14 <hr> 15 收到的数据:{{text}} 16 17 </div> 18 </body> 19 20 <script> 21 //定义全局组件,有自己的html页面内容 22 Vue.component('Child1', { 23 template: ` 24 <div> 25 <div style="width: 200px;display: flex; justify-content: space-between;border: cornflowerblue solid 3px"> 26 <span @click="handleBack">后退</span> 27 <span>{{ title }}</span> 28 <span>前进</span> 29 <br> 30 </div> 31 <div> 32 <input type="text" v-model="mytext"> 33 <button @click="handleSend">点我把我的数据传给父亲</button> 34 </div> 35 </div>`, 36 // 子组件的props属性，接收父组件传递过来的数据 37 props: ['myurl'], 38 data() { 39 return { 40 title:'Child1', 41 mytext:'', 42 } 43 }, 44 methods:{ 45 handleBack(){ 46 alert('往后退') 47 }, 48 handleSend(){ 49 //1.子组件中,要触发---自定义事件执行---myevent--handleMyEvent执行 50 this.$emit('myevent',this.mytext) //会触发myevent事件,handleMyEvent执行并且把mytext传过去 51 } 52 }, 53 }) 54 55 56 //根组件 57 var vm = new Vue({ 58 el: '#app', 59 data: { 60 text:'', 61 }, 62 methods:{ 63 handleEvent(childText){ 64 this.text= childText 65 } 66 } 67 }) 68 </script> 69 </html>
============================================================
【ref属性（父子通信）】
# 1 ref 是个属性，可以放在 -普通标签上：拿到dom对象
-组件上：拿到组件对象--》直接调用组件对象的属性或方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>组件的使用----ref属性</h1> 12 <img src="http://pic.imeitou.com/uploads/allimg/231130/10-2311301F109-lp.jpg" alt="" ref="myimg"> 13 <input type="text" value="xxx" ref="myinput"> 14 <button @click="handlShow">点我看控制台</button> 15 </div> 16 </body> 17 18 <script> 19 20 //根组件 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 25 }, 26 methods:{ 27 handlShow(){ 28 //this是当前vue的实例 29 //this.$refs是在组件中所有标签设置的ref属性的字典{{myimg:对象,myinput:对象}} 30 console.log(this.$refs) 31 // this.$refs.myimg.src='http://pic.imeitou.com/uploads/allimg/231129/10-231129141212-lp.jpg' //修改图片 32 this.$refs.myinput.value='我是修改后的值' //修改输入框的值 33 } 34 } 35 36 }) 37 </script> 38 </html>
==============================================================================================
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>组件的使用----ref属性--放在组件上</h1> 12 <child1 ref="mychild"></child1> 13 <button @click="handleShow">点击看看</button> 14 15 </div> 16 </body> 17 18 <script> 19 20 21 // 1 定义全局组件 22 Vue.component('Child1', { 23 template: ` 24 <div> 25 <div style="width: 300px;display: flex;justify-content:space-between;border: aquamarine solid 1px"> 26 <span @click="handleBack">后退</span> 27 <span @click="handleChange">{{ title }}</span> 28 <span>前进</span> 29 <br> 30 </div> 31 <div> 32 <img :src="url" alt="" height="300px" width="250px"> 33 </div> 34 </div>`, 35 data() { 36 return { 37 title: 'Child1', 38 url: 'http://pic.imeitou.com/uploads/allimg/231129/10-231129140456-lp.jpg' 39 } 40 }, 41 methods: { 42 handleBack() { 43 alert('后退了') 44 }, 45 handleChange(url){ 46 this.url=url 47 } 48 }, 49 }) 50 51 52 // 2 定义局部组件---》定义在组件内部的---》 53 var vm = new Vue({ 54 el: '#app', 55 data: { 56 }, 57 methods:{ 58 handleShow(){ 59 // this 是当前vue实例 60 // this.$refs 是在组件中所有标签设置了ref属性的 字典 {mychild:组件对象} 61 console.log(this.$refs) 62 // this.$refs.mychild 拿到组件对象---》组件对象.属性 组件对象.方法 63 //1 拿到组件对象的属性--》在父中，拿到了子的变量--》子传父 64 console.log(this.$refs.mychild.title) 65 //2 修改组件对象的属性--》在父中，修改子的属性--》父传子 66 this.$refs.mychild.title='首页' 67 68 // 3 调用子组件中的函数 69 this.$refs.mychild.handleChange('http://pic.imeitou.com/uploads/allimg/231129/10-231129141212-lp.jpg') 70 } 71 } 72 }) 73 </script> 74 </html>
。
。
。
【动态组件】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <style> 8 .item { 9 width: 150px; 10 height: 50px; 11 background-color: pink; 12 font-size: 25px; 13 margin: 10px; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 } 18 19 .top { 20 display: flex; 21 justify-content: center; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="app"> 27 <h1>动态组件</h1> 28 <div class="top"> 29 <div class="item" @click="current='goods'"> 30 <span>商品</span> 31 </div> 32 <div class="item" @click="current='order'"> 33 <span>订单</span> 34 </div> 35 <div class="item" @click="current='user'"> 36 <span>用户</span> 37 </div> 38 </div> 39 40 <!-- 不使用动态组件太笨重--> 41 <!-- <div>--> 42 <!-- <goods v-if="current=='goods'"></goods>--> 43 <!-- <order v-else-if="current=='order'"></order>--> 44 <!-- <user v-else>></user>--> 45 <!-- </div>--> 46 47 <div> 48 <component :is="current"></component> 49 </div> 50 51 </div> 52 </body> 53 54 <script> 55 //定义出商品,订单,用户三个组件 56 Vue.component('goods', { 57 template: ` 58 <div> 59 <h3>商品页面</h3> 60 商品列表 61 <br> 62 商品内容 63 64 </div> 65 `, 66 }) 67 Vue.component('order', { 68 template: ` 69 <div> 70 <h3>订单页面</h3> 71 订单内容 72 </div> 73 `, 74 }) 75 Vue.component('user', { 76 template: ` 77 <div> 78 <h3>用户页面</h3> 79 用户详情 80 </div> 81 `, 82 }) 83 var vm = new Vue({ 84 el: '#app', 85 data: { 86 current: 'goods' 87 }, 88 }) 89 </script> 90 </html>
。
。
。
【keep-alive】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <style> 8 .item { 9 width: 150px; 10 height: 50px; 11 background-color: pink; 12 font-size: 25px; 13 margin: 10px; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 } 18 19 .top { 20 display: flex; 21 justify-content: center; 22 } 23 </style> 24 </head> 25 <body> 26 27 <div id="app"> 28 <h1>动态组件</h1> 29 <div class="top"> 30 <div class="item" @click="current='goods'"> 31 <span>商品</span> 32 </div> 33 <div class="item" @click="current='order'"> 34 <span>订单</span> 35 </div> 36 <div class="item" @click="current='user'"> 37 <span>用户</span> 38 </div> 39 </div> 40 <!-- 动态组件的使用--> 41 <div> 42 <!-- 做个缓存--> 43 <keep-alive> 44 <component :is="current"></component> 45 </keep-alive> 46 47 </div> 48 49 </div> 50 </body> 51 52 <script> 53 //定义出商品,订单,用户三个组件 54 Vue.component('goods', { 55 template: ` 56 <div> 57 <h3>商品页面</h3> 58 商品列表 59 <br> 60 商品内容 61 62 </div> 63 `, 64 }) 65 Vue.component('order', { 66 template: ` 67 <div> 68 <h3>订单页面</h3> 69 订单内容 70 </div> 71 `, 72 }) 73 Vue.component('user', { 74 template: ` 75 <div> 76 <h3>用户页面</h3> 77 用户详情 78 <p>用户名:<input type="text"></p> 79 </div> 80 `, 81 }) 82 var vm = new Vue({ 83 el: '#app', 84 data: { 85 current: 'goods' 86 }, 87 }) 88 </script> 89 </html>
。
。
。
【插槽】
# 插槽介绍 一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差 然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在body的组件标签中添加内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <h1>插槽</h1> 11 <goods> 12 <!-- 插槽--> 13 <!-- <img src="http://pic.imeitou.com/uploads/allimg/231121/10-231121152Q0-lp.jpg" alt="">--> 14 <!-- 命令插槽--> 15 <img src="http://pic.imeitou.com/uploads/allimg/231121/10-231121152Q0-lp.jpg" alt="" slot="a"> 16 </goods> 17 18 19 </div> 20 </body> 21 22 <script> 23 24 Vue.component('goods', { 25 template: ` 26 <div> 27 <h3>商品页面</h3> 28 <!-- <slot></slot>--> 29 <!--命令插槽--> 30 <slot name="a"></slot> 31 <hr> 32 <slot></slot> 33 </div> 34 `, 35 }) 36 37 var vm = new Vue({ 38 el: '#app', 39 data: { 40 current: 'goods' 41 }, 42 }) 43 </script> 44 </html>
