一、组件间的通信
组件间的通信分两种情况：父级件传值给子组件，
1、父组件传值给子组件
-
定义子组件模板
<!--创建子组件模板-->
<template id="showfrom">
<div>
<h1>我是子组件：{{title}}</h1>
</div>
</template> -
声明并注册子组件
const sfm={
template:"#showfrom",
props:['title'] //父组件传值给子组件，子组件通过props属性定义用哪个变量来接收值
} -
调用子组件
<!--调用组件
title：是子组件中用来接收父组件值的变量,title变量不能在子组件的data中声明
str:是父组件中data函数中的变量
-->
<sfm v-bind:title="str"></sfm>
2、props 验证
props: {
items:{//属性名为items
type:Array,//属性的类型为数组
default:[],//属性的默认值为[]
required:true //该属性为必须
}
}
当 prop 验证失败的时候，（开发环境构建版本的） Vue 将会产生一个控制台的警告。
3、子组件传值给父组件
子组件传值给父组件，需要通过子组件的自定义事件进行。
将子组件的自定义事件与父组件的某个事件进行关联，操作了子组件的事件，就相当于作了父组件的事件。
-
在父组件中定义函数
//vue实例
let vue=new Vue({
el:"#ap",
data(){
return {
nums:0
}
},components:{
fm
},methods:{//父组件中定义函数
//数量+
sup(newval,oldval){
this.nums++;
},
//数量-
sub(newval,oldval){
this.nums--;
}
}
}); -
在调用子组件时编写自定义事件与父组件事件的关联
<fm v-on:sp="sup" v-on:sb="sub"></fm> -
在子组件中编写事件触发父组件对应的事件
模板代码
<template id="numfrom">
<div>
<hr/>
<p>此处为子组件</p>
<button type="button" v-on:click="nmp">num++</button>
<button type="button" v-on:click="nmb">num--</button>
</div>
</template>
子组件js代码
const fm={
template:"#numfrom",
methods: {
//子组件的+
nmp(){
//调用与父组件关联的自定义事件
this.$emit('sp');
},nmb(){//子组件的-
//调用与父组件关联的自定义事件
this.$emit('sb');
}
}
}
二、vue的路由
路由就是为每个组件绑定一个url地址，可以通过路由绑定的url地址方便的调用指定组件
1、使用路由链接切换组件
-
导入路由支持库
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.js"></script> -
添加路由链接
要想通过路由切换组件，只能使用路由提供的链接标签或使用事件切换
<!--添加路由链接-->
<router-link to="/">登录</router-link>
<router-link to="/">注册</router-link> -
挖坑(添加路由填充位)
添加路由填充位是用来动态显示组件的,以前调用组件的代码写在哪儿，就用添加路由填充位替换
<div id="ap">
<p>
<!--添加路由链接-->
<router-link to="/">登录</router-link>
<router-link to="/">注册</router-link>
</p>
<hr>
<!-- <!–调用登录组件–>-->
<!-- <login></login>-->
<!-- <!–调用注册组件–>-->
<!-- <reg></reg>-->
<!--添加路由填充位 挖一个坑，这个坑就是用来填充要切换的组件-->
<router-view></router-view>
</div> -
创建路由对象
//创建路由对象
let router=new VueRouter({
//编写路由规则
routes:[
//编写登录组件的路由规则
{path:'/login',component:"loginfrom"},
{path:'/reg',component:"regfrom"}
]
}) -
将路由对象添加到持载点中
//vue实例
let vue=new Vue({
el:"#ap",
data(){
return {
}
},components:{
loginfrom,
regfrom
},router //注册路由
});
2、使用路由事件切换组件
在事件中编写如下代码
方式一：
this.$router.push('/login'); //切换到login组件
方式二：
let router=new VueRouter({
//编写路由规则
routes:[
//配置默认路径下的组件
{path:'/',component:loginfrom},
{path:'/login',name:'loginForm',component:loginfrom},
{path:'/reg',name:'regForm',component:regfrom}
]
})
this.$router.push({name:'loginForm'}); //使用路由的name属性切换
3、使用路由传值到组件
a、方式一
-
在路由规则中添加接收参数的占位符
//创建路由对象
let router=new VueRouter({
//编写路由规则
routes:[
//配置默认路径下的组件
{path:'/',component:loginfrom},
{path:'/login/:account',name:'loginForm',component:loginfrom},
]
}) -
修改路由链接
<router-link to="/login/tom">登录</router-link> -
在子组件中接收参数
//登录组件
const loginfrom={
template:"#login",
data(){
return {
ac:'',
}
},created(){
//获得路由传递过来的值
this.ac=this.$route.params.account;
}
}
b、方式二
-
修改父组件中的事件
//vue实例
let vue=new Vue({
el:"#ap",
data(){
return {
}
},components:{
loginfrom,
regfrom
},methods:{
//登录按钮
btnLogin(){
this.$router.push({name:'loginForm',params:{account:'jack'}});
}
},router //注册路由
});<font color=red>注意：这里不能使用:account来传递参数了，因为父组件中，已经使用params来携带参数了。</font>
-
在子组件中接收参数
//登录组件
const loginfrom={
template:"#login",
data(){
return {
ac:'',
}
},created(){
//获得路由传递过来的值
this.ac=this.$route.params.account;
}
}
4、路由的嵌套
//创建路由对象
let router = new VueRouter({
//编写路由规则
routes: [
//配置默认路径下的组件
{path: '/', redirect: '/main'},
{path: '/main',
name: 'mainform',
component: mainform,
children: [//表示mainform组件中又有两个组件
{path: '/login', name: 'loginForm', component: loginfrom},
{path: '/reg', name: 'regForm', component: regfrom}
]
}
]
})
三、VUE axios
axios是vue中提供的用来发送请求给服务器的组件。Vue 2.0 之后
-
导入axios支持
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -
axios.get
//发送请求
//params参数中为要传给服务端的数据，params参数必写 , 如果没有参数传{}即可
axios.get('http://127.0.0.1:8080/user/list',{params:{}})
.then(result=>{//请求成功后的回调函数
console.info(result);
}).catch(error=>{//请求失败后的回调函数
console.info(error);
}) -
axios.post
axios 的 post 请求的请求参数是以 json-string 的形式传递到后台的，对于 Spring MVC 而言，Controller 中是使用 @RequestBody 接收请求参数。同样使用这种形式的还有 PUT、PATCH 等请求方式。
btnquery(){//根据条件查询
axios.post('http://localhost:8080/user/query',
{username:this.username,account: this.account})
.then(result=>{
if(result.data.code==200){
this.userArray=result.data.data;
}else{
alert(result.data.msg);
}
console.log(result.data);
}).catch(error=>{//请求失败后的回调函数
console.info(error);
})
}
}
浙公网安备 33010602011771号