vue框架之插槽，组件的自定义，网络代理配置，网络公共路径配置

插槽

v-slot： 插槽, 具名插槽 slot
slot-scope 这种写法已经过时了，在vue 2.6.0使用 v-slot

语法： v-slot:插槽名 语法糖：#插槽名

没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据

插槽名不用使用引号引起来,直接写变量名

插入的内容必须是template标签或者组件 不能是原生的元素

App.vue文件

<template>
	<div class="appbox">
		<Box1 :msg="n" :title="n2">Box1>
		<Box1 msg="msg6666" title="标题6666">Box1>
	div>
	<Box2 title="hello">
		<template v-slot:s1>
			<b>111111b>
		template>
		<template v-slot:s2>
			<b>2222b>
		template>
	Box2>
template>

<script>
	import Box1 from "@/components/Box1.vue"
	import Box2 from "@/components/Box2.vue"
	export default {
		data() {
			return {
				n: "app组件传给box组件的数据",
				n2: "app组件传给box的标题"
			}
		},
		components: {
			Box1,
			Box2
		}
	}
script>

<style scoped="scoped">
	.appbox {
		width: 100%;
		min-height: 300px;
		background-color: honeydew;
		padding: 0px;
		border: 1px honeydew solid;
	}
style>

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

Box1.vue文件，自己建的

<template>
	<div class="box">
		
		<div class="s">
			<slot>slot>
		div>
		<h1>{{title}}h1>
		<div>{{msg}}div>
	div>
template>

<script>
	export default {
		props: ["msg", "title"]

	}
script>

<style scoped="scoped">
	.box {
		width: 100%;
		min-height: 100px;
		background-color: goldenrod;
		margin: 20px;

	}

	.s {
		width: 60px;
		height: 60px;
		background-color: ghostwhite;
	}
style>

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

Box2.vue文件

<template>
	<div>
		<slot name="s1">slot>
		<h2>{{title}}h2>
		<slot name="s2">slot>
		<slot>slot>
	div>
template>

<script>
	export default {
		props:["title"]
	}
script>

<style>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Box1里面有一个匿名插槽，那么在App.vue 文件里面引入Box1组件，然后在Box1组件的两个标签中建写入数据就会默认插入插槽的地方

Box2.vue里面的插槽是由名字的，所以在插入数据的时候一样要写名字，不然就不知道该插入哪里

插入的数据可以是任意，文字，图片，数据，数组都可以，只要你想的到的数据都可以插入进去

组件的自定义事件和原生事件

1. 在原生组件(就是html标签)中 事件是由系统来设计触发条件的
   

   点我

2. 在自定义组件中,事件是由自己来设计什么时候触发的
   绑定事件：
   点我
   事件设计：
   在mydiv组件内部,你可以在你想要的条件下去触发事件
   this.$emit("myclick","要给触发的事件的函数传入值")
   这个代码放在你想触发自定义事件的地方

3. 如果希望组件绑定原生事件(事件的触发条件设计由系统设计)
   给事件绑定事件修饰符 .native
点我
   事件名必须是系统存在的事件

App.vue

<template>
	<div>
		<button @click="clicked">点击button>
		<p>6666p>
		<Box v-on:myevent="fn">Box>
		<Box2 v-on:click="fn2">Box2>
	div>
template>

<script>
	import Box1 from "./Box.vue"
	import Box2 from "./Box2.vue"
	export default {
		methods:{
			clicked(e){
				console.log("原生事件触发了",e)
			},
			fn(){
				console.log("fn",arguments)
			},
			fn2(){
				console.log("fn2")
			}
		},
		components:{
			Box1,
			Box2
		}
	}
script>

<style scoped="scoped">
	
style>

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

Box1.vue

<template>
	<div>
		<button @click="add">增加button>
		<p>{{count}}p>
	div>
template>

<script>
	export default {
		data() {
			return {
				count: 0
			}
		},
		methods:{
			add(){
				this.count++
			}
		},
		watch:{
			count(v){
				if(v==5){
					//触发组件内的事件
					this.$emit("myevent")
				}
			}
		}
	}
script>

<style>
style>

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

Box2.vue

<template>
	<div>
		<button @click="x">box2button>
	div>
template>

<script>
	export default {
		methods:{
			x(){
				this.$emit("click")
			}
		}
	}
script>

<style>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

原生事件和原生标签这些都是由官方定义的，当我们使用时也是由官方调用的

但是自定义事件就是完全由我们自己设计，使用和调用

就像上面的button标签和click事件，都是由官方提供的原生的

我们在Box里面绑定的事件 myevent 就是由我们自己设计的，我们在App.vue里面绑定，当点击的时候实际上是触发的Box1里面的button绑定的click事件，触发到一定条件，上面设置的是值 v 增加到5 就会触发里面的$ emit，$emit就会去调myevent事件，这个事件就会触发，从而打印 fn

这就是自定义事件的整个过程

网络代理配置

前端和后端需要数据交互，那么就要网络代理配置，不然交互起来就会比较麻烦

App.vue

<template>
	<div>
		<Box>Box>
		<div>
			{{obj.title}}----{{obj.info}}
		div>
	div>
template>

<script>
	import Box from "@/componnets/Box.vue"
	// 记得引入axios文件，不然会报错的额
	import axios from "axios"
	export default {
		data() {
			return {
			// mounted是在页面加载完毕后才会运行，所以要先写一个空对象在这里站位，才不会报错，说undefined
				obj:{}
			}
		},
		components:{
			Box
		},
		async mounted() {
			let res=await axios("/public/ajax")
			console.log(res.data)
			this.obj=res.data
		}
	}
script>

<style>

style>

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

Box.vue

<template>
	<div class="box">
		<button>按钮button>
	div>
template>

<script>
   
	export default {
		mounted() {
			
		}
	}
script>

<style scoped="scoped">
	.box{
		background-color: aliceblue;
		min-height: 40px;
	}
	.box button{
		min-height: 40px;
	}
style>

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

vue.config.js

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	//关闭eslint的严格模式检测
	lintOnSave: false, 
	devServer: {
		port: 8080, 
		// 一般默认配置的是localhost，大家都用localhost，这样就算换IPV4的ip了也不需要去改ip，也能运行
		// proxy: {
		// 	'/api': 'http://localhost:7001',
		// },
		proxy: {
			'/hqyj': {
				target: 'http://192.168.101.109:7001',
				// 如果代理的target是https接口,需要配置它 
				secure: true, 
				// 重写地址
				pathRewrite: {
					'^/public': '/'
				}
			},
		},
	}
})

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

后端数据就自己去写了，我这里就不演示后端数据了

这就已经配置好了网络代理，可以运行获取后端数据，进行交互了

网络公共路径配置

上面已经配置了网络代理，这里在配置一下公共路径
App.vue文件 和 Box.vue 和 vue.config.js文件都是一样的唯一不同的是需要去配置一样main.js文件

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from "axios"
axios.defaults.baseURL="http://192.168.101.109:8080/hqyj"
// 配置公共url  如果这个axios去请求 "ajax"  它实际的网址是
// http://192.168.101.109:8080/public/ajax
Vue.prototype.$axios=axios

var vm=new Vue({
  render: h => h(App),
}).$mount('#app')
console.log(vm)
1
2
3
4
5
6
7
8
9
10
11
12

关于网络就基本配置好啦，是不是感觉好像也不是很难哦，哈哈