需求: A,B两个子页面 点击A页面中table表格中的某行内的button, 获取该行内的信息"ID", 并将该id 传送至B页面,并渲染在页面上.
思路: 获取id > 利用Vuex 将id存到state中 > 在B页面接收id,并渲染到页面
第一步: 先获取table中改行的id ,我用的是element-ui. 利用插槽的方式slot-scope.上代码:
<template slot-scope="scope">
<el-button style="border: none; padding: 0" @click="peizhi(scope)">
配置详情
</el-button>
</template>
<script>
methods:{
peizhi(c) {
// 获取id
console.log(c.row.id)
},
}
</script>
第二步: 将拿到的id存到Vuex中的state
首先需要安装vuex , 在store中新建index.js,并引入Vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: "", // 存储id
},
});
现在我们拿到了id,并有了位置存储id. 下面就是将id 存进去
同样在第一步的时候 拿到id后 ,将id存进count
<template slot-scope="scope">
<el-button style="border: none; padding: 0" @click="peizhi(scope)">
配置详情
</el-button>
</template>
<script>
methods:{
peizhi(c) {
// 获取id
console.log(c.row.id)
this.$store.state.count = c.row.id;
},
}
</script>
第三步: 利用计算属性computed,接收数据
<!-- 渲染页面-->
<el-page-header @back="goBack" :content="'设备参数 | 设备ID:' + count">
computed: {
// 接收数据
count() {
return this.$store.state.count; //用computed接收
},
这样就实现了子组件之间传值.
在vue中 父子之间传值还是很方便的, 在子页面之间传值,和跨区域,跨页面传值,就得利用其他公共空间, 比如cookie等
还有query(在url中明文显示例如: www.baidu.com?sub=12345567)和params