vue props的实现与使用

2022.10.31今天我学会了如何使用props将父页面的内容传到子页面上，效果如图：

父页面： 

点击保存之后的子页面

子页面：

 

一、新建一个页面（子页面）

我们只需要传递表格的内容，所以直接把表格的样式拿过来。

（html代码片段）

 <!--     内部表格-->
  <div class="table" id="table" @change="father()">

    <!--    设置行div-->
    <!-- :style="{height:value.trWidth}"获取高度 -->
    <div
        v-for="(value, key) in hangshuss"
        id="row"
        :key="key"
        :id="`${value.id}`"
        class="row"
        :style="{ height: value.trWidth }"
    >

      <!--      设置列div-->
      <!-- :style="{width:value2.width}"获取宽度 -->
      <div
          v-for="(value2, key2) in value.tdNum"
          :key="key2"
          id="column"
          :id="value2.id"
          class="column"
          :style="{ width: value2.width }"
      ></div>
    </div>
  </div>

（js代码片段）

.table {
  border: 2px solid;

  width: 100%;

  height: 426px;

  border-collapse: collapse;

  /*阴影*/
  box-shadow: 30px 30px 10px black;

  opacity: 0.8;

  /*图片路径*/
  background-image: url("../assets/img/sky.jpg");

  /* background-repeat只显示一个图片 */
  background-repeat: no-repeat;

  /* background-size
    将一个图片撑满一个页面 */
  background-size: 100% 100%;
}

.row {
  width: 100%;

  height: 100%;

  background-color: darkseagreen;

  border: 3px solid blue;

  opacity: 0.6;

  display: flex;

  justify-content: space-around;

  align-items: center;

  flex-wrap: wrap;
}

.column {
  height: 100%;

  background-color: aqua;

  border: 3px solid blue;

  opacity: 0.6;

  flex: 1;

  min-width: 20%;
}

这样就可以拿到一个空白的模板。 

 二、引入父页面注册使用

props里面放你要传递的数据。

import Person from '@/views/HomeView'

export default {

  components: {
    Person
  },

  props: ['hangshuss'],

三、子页面让页面加载之后显示和父页面一样的数据

在div里面写个@change改变事件，然后在js里面写：

created() {

     // 传值过来的数据赋值给原来的数组
    this.hangshuss = this.$route.params.hangshuss

  },
  methods: {

    father() {

      // 拿到传过来的hangshuss数组值
      console.log(this.$route.params)
    }

四、全部代码

父页面：

<!--父页面-->
<template>

  <!--  最外面的盒子-->
  <div class="waibu">

    <!--    标题-->
    <div class="title">模板设置</div>

    <!--      selectTrNum选择value初始值为1-->
    <!--      rows()表示行数-->
    <!--      @change  rows()的改变事件-->
    <select id="rows" @change="rows()" v-model="selectTrNum">
      <option disabled selected>选择行数</option>