Vue组件

组件基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
vue组件的功能简单的说就是帮助我们将一些复用的代码进行封装,然后我们在前端的页面上就可以通过特定的标签将这些组件渲染在页面上，这样子我们就可以省去写重复代码的情况
html代码:
<div id="demo">
	<component_test></component_test>
</div>

js代码:
Vue.component('component_test', {
    data: function() {
        return{
            count:0
        }
    },
    template: '<button v-on:click="count--">You clicked me {{ count }} times.</button>' #将这里的标签渲染在上面
})

ps:组件中的data必须是一个函数，这是为了防止多个组件之间的数据被互相影响

通过prop向组件传递数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
当我们通过一个实例化的对象获得了一定的API数据后，我们若是想将这个实例化对象的数据传递给我们的组件，我们可以使用下述的方式

1.port的值
vue = new Vue({
    el:'#demo',
    data:{
        ports:[
            {id:1,title:'这是port1'},
            {id:2,title:'这是port2'},
            {id:3,title:'这是port3'},
        ]
    }
})

2.创建一个标签，并获得标签中port属性的值
Vue.component('component_test', {
    props:['port'],
    template: '<p>{{ port[0].id }} {{ port[0].title }}</p>' #可以在模板中使用这个port中的值
})


3.使用v-bind为标签设置属性
<component_test v-bind:port='ports'></component_test>
 
ps:我们可以限制传过来的数据的类型
props: {
            myname:String, #传过来的数据必须是字符串类型
            isshow:Boolean #传过来的数据必须是布尔类型
        }

组件向vue实例传递数据的方式

1.通过自定义事件来传递数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
1.通过自定义事件来传递数据
html:
	<navbar @myevent="handleClick"></navbar>

组件:
    Vue.component('navbar', {
        template: `
        <div>
            <button @click="handleNav">点我，触发父组件的某个函数执行</button> #创建一个按钮并绑定了点击事件
        </div>
    `,
        data(){
            return {
                name:'lqz'
            }
        },
        methods:{
            handleNav(){
                this.$emit('myevent',100,this.name,99) #每当按钮被点击时会触发这边的事件，后面是传递的参数
            }
        }
    })

vue实例:
    var vm = new Vue({
        el: '#box',
        data: {
        },
        methods:{
            handleClick(ev,a,b){
                console.log('我是父组件的函数，我执行了')
                console.log(ev)
                console.log(a)
                console.log(b)
            }
        }
    })

2.通过ref属性来传递数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ref属性放置在标签上，拿到的是原生节点
ref属性放置在组件上，拿到的是组件对象
eg:
    html:
        <child ref="mychild"></child> #子组件设置属性
        
    组件:
        Vue.component('child', {
            template: `
            <div>
            <input type="text" v-model="mytext">
            <hr>
            我是子组件的input
            </div>
            `,
            data() {
                return {
                    mytext: ''
                }
            },
            methods:{
                add(a){
                    return '返回了'
                }
            }
        })
    
	实例:
            var vm = new Vue({
        el: '#box',
        data: {
            name: 'asdf'
        },
        methods: {
            handle(a) {
                this.name = a
            },
            handleButton(){
                console.log(this.$refs.mychild.mytext) #获得子组件中的mytext数据
                console.log(this.$refs.mychild.add(this.name)) #向子组件传递数据，将name属性传递给他的方法
            }
        }
    })

组件与组件之间传递数据的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
有些时候我们可能遇到一些需要往另一个组件中传递数据的情况，这种时候我们需要用到一个叫做事件总线的技术，让他在组件与组件之间起到桥梁的作用

1.首先我们先定义一个事件总线
    var bus=new Vue()
 
2.在某个组件中使用这个事件总线
    Vue.component('child1', {
        template: `
        <div>
        <input type="text" v-model="text">
        <button @click="handleClick">点我传递数据到另一个组件</button>
        </div>
    `,
        data() {
            return {
                text: ''
            }
        },
        methods: {
            handleClick() {
                console.log(this.text)
                bus.$emit('suibian',this.text) #把数据传递给事件总线
            }
        }
    })

3.在另外一个组件上监听事件总线的变化
    Vue.component('child2', {
        template: `
        <div>
        收到的消息是：{{recv_text}}
        </div>
    `,
        data(){
            return {
                recv_text:''
            }
        },
        mounted(){  #组件挂载（生命周期钩子函数中的一个），开始监听事件总线上的随便
            bus.$on('suibian',(item)=>{
                console.log('收到了',item)
                this.recv_text=item
            })
        },
    })

vue生命周期图

Vue 实例生命周期

动态组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
有些时候我们可能拥有多个子组件，但同一时间内只会显示一个，或通过用户的某些操作来改变组件的展示
这时我们就需要用到动态组件

1.在实例中的data中设置一个任意名称的数据，这个数据要与组件有关系
实例:
    var vm = new Vue({
        el: '#box',
        data: {
            who: 'child1'
        },
        components: {
            child1: {
                template: `
                <div>我是首页 
                <input type="text">
                </div>
                `,
            },
            child2: {
                template: `
                <div>我是商品 </div>
                `,
            },
            child3: {
                template: `
                <div>我是订单 </div>
                `,
            }
        }
    })
    
2.在html中设置一个component标签
	<component :is="who"></component> 这个标签的:is属性与data中的数据有关系，后期我们可以通过修改who的属性来设置这个地方出现的组件是谁

keep-alive标签的作用

1
2
3
4
5
加入该标签后，若你切换到另外一个组件，这个组件不会被销毁，这样的话数据会保留下来	
eg：
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>

使用axios向后端发送ajax请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
axios是一个框架，使用这个框架可以帮助我们向后端发送ajax请求
1.导入cdn
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

2.如上图，我们可以看到vue的生命周期，在mounted之后我们对前端设定的模板进行了替换，所以我们可以在此之前发送ajax请求，获得数据。
然后他会对前端的模板进行替换。
vue = new Vue({
    el: '#axios',
    data: {
        data:null
    },
    created() {
        axios.get('http://127.0.0.1:8001/home/home/').
        #设置一个回调函数
        then(response => (
            this.data = response.data # 将this.data中的数据替换成返回的数据
        ))
    }
})

插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
我们之前有学过有关组件的基本内容，而插槽就是在组件内进行一个定位。我们可以在某些位置对定位的内容进行定量的替换

html内容
<slot_test>
	<slot_test2></slot_test2>
</slot_test>


Vue插槽内容:
#模板文件
Vue.component('slot_test',{
    template:
    `<div>这是第一层的div
        <div>
            这是第二层的div
            <slot></slot>
            这是slot底下的文字
        </div>
    </div>		
    `
})

#要插入模板文件的组件
Vue.component('slot_test2',{
	template:`<div>我在哪？</div>`
})

#如上所示，我们将底下的组件插入到上面的组件中的模板中了，它默认是在所有的slot位置插入所有有写的组件


我们也可以根据插槽的一个name属性，来指定我们将某个插件插入在哪个位置
1.首先我们在一个根插槽为一个slot设置一个name属性
Vue.component('slot_test',{
	template:
	`<div>
		这是第一层的div
		<slot name='first'></slot>
		这是第一层slot底下的文字
	
		<div>
			这是第二层的div
			<slot name='second'></slot>
			这是第二层slot底下的文字
		</div>
	</div>		
	`
})


2.其次我们就可以利用这个在组件中使用slot属性指定我们需要将对应的组件插入的位置
html:
<slot_test>
	<slot_test2 slot='second'></slot_test2>
	<slot_test3 slot='first'></slot_test3>
</slot_test>

组件:
Vue.component('slot_test2',{
    template:`<div >我在哪？</div>`
})
Vue.component('slot_test3',{
    template:`<div >我在这</div>`
})

自定义指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
vue提供了自定义指令的方式
    html:
    	<div v-mystyle="color"> 我是div</div>
    组件:
        Vue.directive('mystyle', {
            inserted(ev, color) {  #ev就是标签对象
                console.log(ev)
                console.log(color.value) #color.value才是真正的数据
                ev.style.background = color.value
            },
            update(el, input) {
                el.style.background = input.value

            }
        })

过滤器

1
2
3
4
5
6
7
过滤器可以帮助我们进行一些特定的操作
html:
	<img :src="item.img | repUrl" alt="">
过滤器:   
    Vue.filter('repUrl', function (url) {
        return url.replace('w.h', '128.180')
    })