记: 利用VueX 实现子组件之间传值

需求: 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