Vue 页面传参以及 父子组件之间的传参

最近在公司开发后台管理系统前端页面

遇到了页面传值的问题，借此空余时间机会，记录下，目的是帮自己梳理一下知识，如果能帮到读者的你们，是我的荣幸！

Vue开发遇到的页面传值问题，用到了两种方法，先都总结出来 ：

1. 页面传值 ：

this.$router.push({ name: 'cityListDetail', query: { id: rowData.id }})

• 路由传值，这样的方式是最简单的，最好传id之类的不重要消息，因为这种方式是在地址栏&id=1 的方式传值，所以不要传重要信息，除非MD5之类的加密措施。

this.$route.query.id  // 在跳转页面 从地址栏获取 id

3. 父子组件之间传值 子组件 传给 父组件

• 一种是Dom之间传值 用ref传值
• 另一种是 绑定方法传参

1、在父组件里面添加一个 res=‘wtImg’（名字自定义），然后在父组件方法里面添加

this.$refs.wtImg.removeImageList() // removeImageList方法在子组件methods里面定义
// 子组件method方法
removeImageList() { 
  				    this.wtFilList = [] // 可以是任意 逻辑 或参数 都能传给父组件
}
// 父组件 方法里面使用
this.$nextTick(() => { // 当Dom 发生变化的时候 ，更新后执行的回调
 this.$refs.wtImg.removeImgList()
})

2、子组件传值给父组件

// 子组件
<button v-on:click="sendMsg">向父组件传参</button>

methods: {
		  sendMsg:function() {
	    this.$emit('headCallBack','子组件的传参内容') // 第一个参数是父组件中的v-on绑定的自定义回调方法，第二个参数是传递的参数
  }
}

// 父组件
<div>子组件传过来的内容：{{msg}}</div>
<mainHeader v-on:headCallBack="headCall"></mainHeader>


methods: {
	headCall: function (msg) { //回调方法，接收子组件传的参数
	 this.msg = msg;	
    }
}