一.路由传参

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:'
登录组件---{{ $route.query.id }}--{{ $route.query.name }}
',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:'
登录组件---{{ $route.params.id }}--{{ $route.params.name }}
',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 :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 @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 @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 传值

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！