vue父子组件传参、兄弟组件传参、页面跳转传参
1、父组件向子组件传参父组件向子组件共享数据需要使用自定义属性// 父组件<template><div>// 使用子组件<son :msg="message" :userInfo="userInfo"></son></div></template><script>// 引入子组件import son from '.
·
1、父组件向子组件传参
父组件向子组件共享数据需要使用自定义属性
// 父组件
<template>
<div>
// 使用子组件
<son :msg="message" :userInfo="userInfo"></son>
</div>
</template>
<script>
// 引入子组件
import son from './test'
export default {
name: 'dad',
data() {
return {
// 动态绑定数据
message: '我是父组件',
userInfo: {name: '父亲', age: 50}
}
},
components: {
// 注册子组件
son
}
}
</script>
// 子组件
<template>
<div>
<h1>父组件传递的msg值是:{{ msg }}</h1>
<h1>父组件传递的userInfo值是:{{ userInfo }}</h1>
</div>
</template>
<script>
export default {
name: '',
// 接受父组件传递的参数
props: ['msg', 'userInfo']
}
</script>
<style scoped>
</style>
注:props在vue里面设置为只读,是对外接口,props类似公有属性,允许外部访问。本来约定props不允许直接修改,不过想修改也是可以直接修改,但是建议通过emit事件通过父组件修改,让父组件感知变化。也就是单项数据流。所以,props能在子组件中被修改,但不推荐。
2、子组件向父组件传参
父组件向子组件共享数据需要使用自定义事件
// 父组件
<template>
<div>
// 使用子组件,并监听子组件自定义的事件
<son @sonCount="getSonCount"></son>
</div>
</template>
<script>
// 引入子组件
import son from './test'
export default {
name: 'dad',
data() {
return {
sonCount: 0
}
},
components: {
// 注册子组件
son
},
methods: {
getSonCount(val) {
this.sonCount = val
}
}
}
</script>
// 子组件
<template>
<div>
<h1>我是子组件--------{{ count }}</h1>
<button @clikc="add">+1</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
add() {
this.count += 1
// 修改数据时候,通过$emit()触发自定义事件
this.$emit('sonCount', this.count)
}
}
},
</script>
<style scoped>
</style>
3、兄弟组件传参
在兄弟组件中,传递值的方法有四种。
- 子传父,父传子
- vuex
- eventBus
- 本地储存(sessionStorage.setItem|sessionStorage.getItem)
(1)子传父,父传子
这种情况是兄弟组件在存在同一个父组件中,选择曲线传值,先把子A组件的值传给父组件,父组件再把值传给子B组件。
(2)利用vuex,把值存储在store仓库当中,需要值的兄弟组件再调取仓库的数据
<script>
import {mapGetters, mapState} from 'vuex'
export default {
computed: {
// 从计算属性getter中抽取值
...mapGetters(['goodsList']),
// 从当前仓库数据中抽取值
...mapState({
total: state => state.search.searchList.total
})
},
}
</script>
详情使用参考vuex模块式开发_麦多馅饼的博客-CSDN博客
(3)eventBus
- 创建eventBus.js模块,并向外共享一个Vue的示例对象
- 在数据发送方,调用bus.$emit('事件名称',要发送的数据) 方法触发自定义事件
- 在数据接收方,调用bus.$om('事件名称',事件处理函数) 方法注册一个自定义事件
也可以将eventBus注册为全局组件,这样就不需要局部引用就可以直接使用
new Vue({
beforeCreate() {
Vue.prototype.$bus = this;
},
}).$mount('#app')
(4)本地储存(sessionStorage.setItem|sessionStorage.getItem)
sessionStorage.setItem("SKUINFO",this.skuInfo) // 设置的值
sessionStorage.getItem('SKUINFO') // 获取存储的值
4、页面四种传参方法
参考博主:vue四种页面跳转传参方法 - 简书
1、push方法:
query传参 参数会在链接后面显示
this.$router.push({
path: "/home",
query: { id: 1 },
});
params传参 参数不会显示在链接后面
this.$router.push({
name: "/home",
params: { id: 1 },
});
注意:
- params传参要用name 不能用path
- 接受参数:this.$route.params 和 this.$route.query
2、window.href 传参:
let username = 'zs'
window.location.href = `home/?user=${username}`
3、router-link标签跳转传参 :
<router-link :to="{name:'home',params:{user:zs}}">点击跳转</router-link>
4、利用resolve新打开新窗口传参
const {href}= this.$router.resolve({
name:"animation",//要打开的路由name
query:{
id:321 //传递参数
}
});
window.open(href,"_blank") //打开新窗口
更多推荐
已为社区贡献2条内容
所有评论(0)