Vue Cli传参

一、页面跳转传参

params（返回不需要带参），query（带查询参数）
1、 第一个页面：

<router-link :to="{name:'Management',params:{userId:this.userId}}">
        <div>跳到第二个页面</div>
</router-link>

第二个页面：

 created: function () {console.log(this.$route.params.userId)}  //返回页不需要参数
 created: function () {console.log(this.$route.query.userId)}  // 带查询参数，变成 /register?plan=private

2、第一个页面：

<div @click="routerLink">跳转到第二个页面</div>
methods:{
    routerLink:function(){
      this.$router.push({ name: 'Detail', params: { userId: this.userId}})
    }
}

第二个页面：

created: function () {
      console.log("userId:"+this.$route.params.userId); 
}

二、数据传递

1、子组件向父组件传值

子： <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
     methods: {
       childClick () {
         this.$emit('childByValue', this.childValue)
        }
    }
父： <child v-on:childByValue="childByValue"></child>
     methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
       }
     }

2、父组件向子组件传值

父：<child :inputName="name"></child>
子：<span>{{inputName}}</span>
    export default {
    // 接受父组件的值
    props: {
      inputName: String,  //数组就是Array等等
      required: true
    }
  }

3、非父子传值(vuex或者bus)