为毕业设计操心第好几天(最近都是大哥下午教我学点东西,不过矛盾挺多,沟通吧)
——2020.02.22
1.先是学了router,带参,实现跳转
视图区域——对要点击进行跳转的组件进行代码编写
<style>
<li
v-for="item in productItem"
:key="item.id" @click="goToProductInfo(item.id)">
</li>
</style>
脚本区域——对点击后触碰的方法,进行事件处理
//方法调用
created() {
this.goToProducted();
}
goToProductInfo(id) {
console.log(id);//控制台打印
//1——路由传参的方式,实现跳转
this.$router.push({
path: `/detail?id=${id}&name=12345`,
});
//——————写在接收页面:接收参数值的方法——————//
// getRouter() {
// console.log(this.$route.query)
// },
//2——params 传参
//"name"---跳转的组件名称, params---参数
this.$router.push({name: "detail",params: {id:1}
});
//————————————params 传参的接收方式————————//
getRouter() {
console.log(this.$route.params)
},
//3——router-link query传参,写在视图区域:
<router-link :to="{path: '/classification',query: {name:leftitem.id}}">
<a>{{leftitem.name}}</a>
</router-link>
//——————————————接收代码————————————//
// getRouter() {
// console.log(this.$route.query.name)
// },
}
//es6中允许使用 `` 创建字符串模板,可以直接写回车空格编写html或文本
// ` ` 中可以使用 ${ }直接把变量与字符串拼接起来
2.父子组件通信
父组件是通过props属性给子组件通信的
假如,在主页面中,某部分引入了公共组件,然后他们两个是父子组件,要实现通信
在脚本区域写props
<script>
export default {
props:['publishBanner', 'images'],
};
</script>
子组件与父组件通信
- 子组件代码:
<template>
<div @click="open"></div>
</template>
methods: {
open() {
this.$emit('showbox','the msg'); //触发showbox方法,'the msg'为向父组件传递的数据
}
}
- 父组件代码
<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法
methods: {
toshow(msg) {
this.msg = msg;
}
}
天天堆在电脑前,我已经开始:脖子下边那一块痛死(似乎形成了富贵包)
就这我还每天早上一小时,做keep!