vue-router学习带参数，父子组件通信，

  为毕业设计操心第好几天（最近都是大哥下午教我学点东西，不过矛盾挺多，沟通吧）
                                   ——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！