2021-04-30

业务需求：跳转每个模块之前都有一个协议页面，要先同意协议之后才能真正进入相应的模块。
思路：将协议页面封装为组件，由于协议样式相同内容不同，决定将协议的主要内容放在JSON文件中，在组件中引入JSON文件。

//父组件 agreementType进行判断是哪个模块的协议
<Agreement :show.sync="agreementShow" :agreementType="agreementType"></Agreement>

//agreement.json文件
{  
  "passwordReset":{
    "title":'密码重置'，
     "List":[
        "啦啦啦啦啦啦"，
        "嘻嘻嘻嘻嘻"，
        "哈哈哈哈哈"
        ]
     }
  }

//agreement组件
第一步：先引入json文件
import data from "./agreement.json"
data(){
  return {
      data
      }
  }
第二步在页面中使用
//协议标题
<h5>{{data[agreementType].title}}<h5>
//协议内容
<p v-for="(item,index) in data[agreementType].List" :key="index">{{item]}}<p>

父组件传递给子组件的agreementType是来进行判断具体为哪一个模块的协议