插槽
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>111111</b>
</template>
<template v-slot:s2>
<b>2222</b>
</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>
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>
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>
Box1里面有一个匿名插槽,那么在App.vue 文件里面引入Box1组件,然后在Box1组件的两个标签中建写入数据就会默认插入插槽的地方
Box2.vue里面的插槽是由名字的,所以在插入数据的时候一样要写名字,不然就不知道该插入哪里
插入的数据可以是任意,文字,图片,数据,数组都可以,只要你想的到的数据都可以插入进去
组件的自定义事件和原生事件
-
在原生组件(就是html标签)中 事件是由系统来设计触发条件的
<div @click="fn">点我</div>
-
在自定义组件中,事件是由自己来设计什么时候触发的
绑定事件:
<mydiv @myclick="fn">点我</mydiv>
事件设计:
在mydiv组件内部,你可以在你想要的条件下去触发事件
this.$emit("myclick","要给触发的事件的函数传入值")
这个代码放在你想触发自定义事件的地方 -
如果希望组件绑定原生事件(事件的触发条件设计由系统设计)
给事件绑定事件修饰符.native
<mydiv @click.native="fn">点我</mydiv>
事件名必须是系统存在的事件
App.vue
<template>
<div>
<button @click="clicked">点击</button>
<p>6666</p>
<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>
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>
Box2.vue
<template>
<div>
<button @click="x">box2</button>
</div>
</template>
<script>
export default {
methods:{
x(){
this.$emit("click")
}
}
}
</script>
<style>
</style>
原生事件和原生标签这些都是由官方定义的,当我们使用时也是由官方调用的
但是自定义事件就是完全由我们自己设计,使用和调用
就像上面的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>
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>
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': '/'
}
},
},
}
})
后端数据就自己去写了,我这里就不演示后端数据了
这就已经配置好了网络代理,可以运行获取后端数据,进行交互了
网络公共路径配置
上面已经配置了网络代理,这里在配置一下公共路径
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)
关于网络就基本配置好啦,是不是感觉好像也不是很难哦,哈哈