vue组件（页面）之间的传值方式

一.路由传参

1.query方式传参

query 方式是使用查询字符串 ?id=xx&name=xx，给路由传参，不需要修改路由规则的 path 属性
获取 query路由参数的方式 $route.query.xx

<div id="app">
    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-view></router-view>
</div>
<script>
    var login = {
        template:'<h1>登录组件---{{ $route.query.id }}--{{ $route.query.name }}</h1>',
        data(){
            return{}
        },
        created(){ //组件的生命周期钩子函数
            console.log(this.$route.query.id)
        }
    }
    var router = new VueRouter({
        routes:[
            { path:'/login', component:login }
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>

2.params方式传参

params 方式使用 /xx/xx 的方式给路由传递参数，则需要修改 路由规则的 path 属性 path:'/login/:xx/:xx'
获取 params 路由参数的方式 $route.params.xx

<div id="app">
    <!-- 如果在路由中，使用 params，给路由传递参数，则 需要修改 路由规则的 path 属性 -->
    <router-link to="/login/20/ls">登录</router-link>
    <router-view></router-view>
</div>

<script>
    var login = {
        template:'<h1>登录组件---{{ $route.params.id }}--{{ $route.params.name }}</h1>',
        data(){
            return{}
        },
        created(){ //组件的生命周期钩子函数
            console.log(this.$route.params.id)
        }
    }
    var router = new VueRouter({
        routes:[
            { path:'/login/:id/:name', component:login },
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>

二.组件传值

1.父组件给子组件传值

父组件

<!--父组件中包含的子组件 sub-content-->
<sub-content :parent="parentData"></sub-content>

import subContent from './subContent.vue'
export default {
	data() {
		return {
			parentData: '我是父组件的值',
		}
	},
	components: {
	  subContent
	},
	methods: {}
}

子组件

<template>
  <div>
    <p>{{parent}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  props: {//注意：组件中的所有 props 中的数据，都是通过 父组件传递给子组件的
   //props 中的数据，都是只读的，无法重新赋值
    parent: {
      type: String,
      required: true
    }
  }
}
</script>

父组件中，可以在引用子组件的时候，通过 属性绑定(v-bind)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

补充

可以使用 .sync 修饰符实现 prop 数据的双向绑定

2.父组件给子组件传递方法

父组件

<!--父组件中包含的子组件 sub-content-->
<sub-content @parentFunc="getMe"></sub-content>

import subContent from './subContent.vue'
export default {
	data() {
		return {
			parentData: '我是父组件的值',
		}
	},
	components: {
	  subContent
	},
	methods: {
	  getMe() {
	    console.log(this.parentData)
	  },
	}
}

子组件

<template>
  <div>
    <button @click="getParentData">点击我得到父组件的值</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    getParentData() {
      // 当点击子组件的按钮的时候，使用 $emit 拿到 父组件传递过来的 parentFunc 方法，
      // 并调用这个方法
      this.$emit('parentFunc')
    }
  },
}
</script>

父组件向子组件 传递方法，使用的是 事件绑定机制：v-on ，当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的这个方法了

3.子组件给父组件传值

父组件

<!--父组件中包含的子组件 sub-content-->
<sub-content @parentFunc="getMe"></sub-content>

import subContent from './subContent.vue'
export default {
	data() {
		return {
			parentData: '我是父组件的值',
		}
	},
	components: {
	  subContent
	},
	methods: {
	  getMe(data) {
	    console.log(this.parentData, data)
	  },
	}
}

子组件

<template>
  <div>
    <button @click="getParentData">点击我得到父组件的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '我是子组件的值'
    }
  },
  methods: {
    getParentData() {
      // 子组件给父组件传值，通过 $emit 的方法参数传递
      this.$emit('parentFunc', this.msg)
    }
  },
}
</script>

4.兄弟组件之间传值

有两种方法，可以借助先子传父，再父传子
这里主要说明第二种方法：eventBus 事件总线

在 components 目录下新建了 common 文件夹，里面目录为

// bus.js
import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue;

export default bus;

子组件1：childOne.vue

<template>
  <div>
    <p>兄弟1</p>
    <button @click="sendMsg">兄弟组件之间传值</button>
  </div>
</template>
<script>
import bus from './bus'
export default {
  data() {
    return {
      one: '我是兄弟1的值'
    }
  },
  methods: {
    sendMsg() {
      bus.$emit('send', this.one)  // one 发送消息给 two
    }
  }
}
</script>

子组件2： childTwo.vue

<template>
  <div>
    <p>兄弟2</p>
    <p>{{two}}</p>
  </div>
</template>
<script>
import bus from './bus'

export default {
  data() {
    return {
      two: '兄弟2自己的值'
    }
  },
  created() {  // 在生命周期为 created 的时候，通过 bus 中央时间总线用 $on 监听组件发送
    // 的时间，用一个带参数的回调函数，接受传递过来的值
    bus.$on('send', val => { // two 监听到 one 发送过来的消息
      this.two = val
    })
  },
  beforeDestroy() {
    bus.$off('send')  // 监听后一定要在 beforeDestroy 中使用 $off 释放
  },
}
</script>

父组件

<template>
  <div class="hello">
    <child-one></child-one>
    <child-two></child-two>
  </div>
</template>
<script>
import childOne from './common/childOne'
import childTwo from './common/childTwo'
export default {
  name: 'HelloWorld',
  components: {
    childOne,
    childTwo
  },
}
</script>

$emit：触发
$on：监听
$off：释放

5.vuex 传值