父组件向子组件传值： 1.以对象方式传诗的名字和作者的姓名 2.以自定义验证的方式传，作者的朝代，要求，必须是唐或宋

在Vue中，父组件可以通过props（属性）将数据传递给子组件。这里我们分两个步骤来介绍：

1. **对象方式传值**：
如果你想把诗歌的名字和作者姓名以对象的形式传递给子组件，你可以这样做：

<!-- 父组件 -->
<template>
  <div>
    <child-component :poetryData="{ name: '静夜思', author: '李白' }"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

然后在子组件中接收这个数据：

<!-- 子组件 ChildComponent.vue -->
<template>
  <p>Name: {{ poetryData.name }} | Author: {{ poetryData.author }}</p>
</template>

<script>
export default {
  props: {
    poetryData: {
      type: Object,
      required: true, // 声明这是必需的
    }
  },
  computed: {
    // 如果只需要显示数据，可以直接使用
    formattedAuthorName() {
      return this.poetryData.author;
    }
  }
};
</script>

2. **自定义验证方式传值**：
对于作者的朝代验证，你需要在父组件里处理逻辑，确保传入的是“唐”或“宋”。这里有一个简单的例子：

<!-- 父组件 -->
<template>
  <div>
    <child-component :author="validatedAuthor" :poetryData="{ name: '静夜思', author: '李白' }"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { isValidPeriod } from './utils'; // 假设isValidPeriod是一个检查朝代的方法

export default {
  components: { ChildComponent },
  data() {
    return {
      originalAuthor: '李白',
    };
  },
  methods: {
    validateAuthor(author) {
      if (isValidPeriod(author, ['唐', '宋'])) {
        this.validatedAuthor = author;
      } else {
        console.error('Invalid period. Must be either "唐" or "宋".');
      }
    },
  },
  watch: {
    // 当originalAuthor变化时触发验证
    originalAuthor(newAuthor) {
      this.validateAuthor(newAuthor);
    },
  },
  beforeMount() {
    // 初始化验证
    this.validateAuthor(this.originalAuthor);
  },
};
</script>

在`ChildComponent`中接收已验证的作者名：

<!-- 子组件 ChildComponent.vue -->
<template>
  <p>Name: {{ poetryData.name }} | Validated Author: {{ validatedAuthor }}</p>
</template>

<script>
// ...
</script>