【组件的使用】
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>
标签：10,Vue,--,通信,父子,template,组件,data From： https://www.cnblogs.com/liuliu1/p/18164174