vue页面用ref访问属性传值

Question

ref vue页面传值在title页面可以打印出来，但在areatwo得不到值，显示不出来

title.vue
```html
<template>
  <div>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div class="line1"></div>
    <h1 class="title">震情汇报</h1>
    <p class="title">{{ week }}</p>
    <div>
      <el-row>
        <el-col :span="12" class="state">
          <el-input v-model="title" placeholder="请输入单位名称"></el-input>
        </el-col>
        <el-col :span="12">
          <div class="block">
            {{ valuedate }}
            <!-- placeholder= "选择日期" :picker-options="pickerOptions"
            <div v-model="valuedate" align="right" type="date" >
            </div> -->
          </div>
        </el-col>
        <!-- <el-col :span="4">
          
            {{oneWeekago}}
          
        </el-col> -->
      </el-row>
    </div>
    <div class="line1"></div>
    <editareatwo
      ref="editareatwoRef"
       :oneWeekAgo1="oneWeekAgo" 
      >
      </editareatwo>
  </div>
</template>

<script>
import editareatwo from "./editareatwo.vue";
export default {
  components: {
    editareatwo,
  },
  data() {
    return {
      title: "",
      value: "",
      options: [
        { value: "选项1", label: "产出周报" },
        { value: "选项2", label: "产出月报" },
      ],
      oneWeekAgo: "",
      oneMonthAgo: "",
      week: "",
      valuedate: "",
    };
  },
  mounted() {
    const today = new Date(); // 获取当前日期对象
    const year = today.getFullYear(); // 获取当前年份
    const month1 = ("0" + (today.getMonth() + 1)).slice(-2); // 获取当前月份，并格式化成两位数字
    const day = ("0" + today.getDate()).slice(-2); // 获取当前日期，并格式化成两位数字
    this.valuedate = `${year}-${month1}-${day}`; // 将当前日期格式化为 'YYYY-MM-DD'，并存储到数据变量中
 },
  watch: {
    value(newVal) {
      this.calculateWeek(newVal);
    },
  },
  methods: {
    calculateWeek(newVal) {
      console.log("chufa");
      switch (newVal) {
        case "选项1":
          var time,
            week,
            checkDate = new Date(this.valuedate);
          checkDate.setDate(
            checkDate.getDate() + 4 - (checkDate.getDay() || 7)
          );
          time = checkDate.getTime();
          checkDate.setMonth(0);
          checkDate.setDate(1);
          week = Math.floor(Math.round((time - checkDate) / 86400000) / 7);
          this.week = "(第" + week + "期)";
          console.log(this.week);
          var oneWeekAgo2 = new Date(this.valuedate); // 创建一个新的日期对象
          oneWeekAgo2.setDate(oneWeekAgo2.getDate() - 7); // 将日期设置为一周前
          this.oneWeekAgo = oneWeekAgo2.toISOString().substring(0, 10); // 获取符合ISO标准的日期字符串，截取前10个字符
          console.log(this.oneWeekAgo);
            //  // 父组件通过ref访问并修改子组件的属性
    // console.log(this.oneWeekAgo)
         this.$refs.editareatwoRef.oneWeekAgo1=this.oneWeekAgo;
         console.log(this.$refs.editareatwoRef.oneWeekAgo1)
          break;
        case "选项2":
          var month;
          var dateObj = new Date(this.valuedate); // Convert the string to a Date object
          month = dateObj.getMonth() + 1;
          this.week = `(第${month}期)`;
          console.log(this.week);
          var oneMonthAgo = new Date(this.valuedate); // 创建一个新的日期对象
          oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1); // 将日期设置为一个月前
          this.oneMonthAgo = oneMonthAgo.toISOString().substring(0, 10); // 获取符合ISO标准的日期字符串，截取前10个字符
          console.log(this.oneMonthAgo);
          break;
        default:
          this.week = "";
      }
    },
  },
};
</script>
<style scoped>
/* 横线 */
.line1 {
  float: right;
  width: 100%;
  height: 1px;
  margin-top: 0em;
  background: #d4c4c4;
  position: relative;
  text-align: center;
}
.title {
  text-align: center;
}
.state {
  text-align: left;
}
.block {
  text-align: right;
}
</style>

areatwo.vue

<template>
  <div>
    二、省内及邻区(ML≥2.0):<br /><br />  
    <p>{{ oneWeekAgo1 }}</p>
    <!-- <p>{{ this.oneMonthAgo }}</p> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: {
    oneWeekAgo1: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      lndz: " ",
      colWidth: [
        { title: "发震日期", width: 4 },
        { title: "发震时刻", width: 4 },
        { title: "经度", width: 2 },
        { title: "纬度", width: 2 },
        { title: "震中区", width: 10 },
        { title: "震级(ML)", width: 2 },
      ],
    };
  },
  mounted() {
    axios
      .get("http://127.0.0.1:5004/lndz")
      .then((response) => {
        console.log(this.lndz);
        this.lndz = response.data.lndz;
        console.log(this.lndz);
      })
      .catch((error) => {
        console.error(error.message);
        this.message = "请求失败，请稍后再试";
      });
  },
};
</script>

Answer 1

你这里正常的传值就可以了，没必要用ref
子组件放个默认值