vue动态修改子组件的内容

需求：多个相同的模块，模块内文本内容不一样，如何进行代码优化

思路：组件复用+props传值+动态绑定

1.封装成组件（Children.vue）

<template>
   <div class="container">
        <p class="title">{
  {title}}</p>
        <p>{
  {message}}</p>
    </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String, //定义属性类型
      default: "", //属性的默认值
    },
    message: {
      type: String, //定义属性类型
      default: "", //属性的默认值
    },
  },
};
</script>

<style scoped lang='less'>
 .container {
       width: 150px;
       height: 100px;
       text-align: center;
       background: #999;
       color: #fff;
 }
</style>

2.使用子组件+传值+动态绑定

<template>
   <div class="parent">
       <Children :