vue组件（页面）之间的传值方式 |
您所在的位置：网站首页 › a标签传值到另一个页面 › vue组件（页面）之间的传值方式 |
vue组件（页面）之间的传值方式
|
一.路由传参
1.query方式传参
query 方式是使用查询字符串 ?id=xx&name=xx，给路由传参，不需要修改路由规则的 path 属性 获取 query路由参数的方式 $route.query.xx 登录 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 }); 2.params方式传参params 方式使用 /xx/xx 的方式给路由传递参数，则需要修改 路由规则的 path 属性 path:'/login/:xx/:xx' 获取 params 路由参数的方式 $route.params.xx 登录 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 }); 二.组件传值 1.父组件给子组件传值父组件 import subContent from './subContent.vue' export default { data() { return { parentData: '我是父组件的值', } }, components: { subContent }, methods: {} }子组件 {{parent}} export default { data() { return {} }, methods: {}, props: {//注意：组件中的所有 props 中的数据，都是通过 父组件传递给子组件的 //props 中的数据，都是只读的，无法重新赋值 parent: { type: String, required: true } } }父组件中，可以在引用子组件的时候，通过 属性绑定(v-bind)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 补充可以使用 .sync 修饰符实现 prop 数据的双向绑定 2.父组件给子组件传递方法父组件 import subContent from './subContent.vue' export default { data() { return { parentData: '我是父组件的值', } }, components: { subContent }, methods: { getMe() { console.log(this.parentData) }, } }子组件 点击我得到父组件的值 export default { data() { return {} }, methods: { getParentData() { // 当点击子组件的按钮的时候，使用 $emit 拿到 父组件传递过来的 parentFunc 方法， // 并调用这个方法 this.$emit('parentFunc') } }, }父组件向子组件 传递方法，使用的是 事件绑定机制：v-on ，当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的这个方法了 3.子组件给父组件传值父组件 import subContent from './subContent.vue' export default { data() { return { parentData: '我是父组件的值', } }, components: { subContent }, methods: { getMe(data) { console.log(this.parentData, data) }, } }子组件 点击我得到父组件的值 export default { data() { return { msg: '我是子组件的值' } }, methods: { getParentData() { // 子组件给父组件传值，通过 $emit 的方法参数传递 this.$emit('parentFunc', this.msg) } }, } 4.兄弟组件之间传值有两种方法，可以借助先子传父，再父传子 这里主要说明第二种方法：eventBus 事件总线 在 components 目录下新建了 common 文件夹，里面目录为 子组件1：childOne.vue 兄弟1 兄弟组件之间传值 import bus from './bus' export default { data() { return { one: '我是兄弟1的值' } }, methods: { sendMsg() { bus.$emit('send', this.one) // one 发送消息给 two } } }子组件2： childTwo.vue 兄弟2 {{two}} 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 释放 }, }父组件 import childOne from './common/childOne' import childTwo from './common/childTwo' export default { name: 'HelloWorld', components: { childOne, childTwo }, }$emit：触发 $on：监听 $off：释放 5.vuex 传值 |
【本文地址】