vue 父给子传值并监听

父：

<template>
  <div class="sfmlist">
    <el-form v-model="ruleForm">
      <el-row>
        <el-col :span="24">
          <el-col :span="24">
            <el-form-item label="径流场类型:" prop="m0018ZbType">
              <el-radio v-for="item in options" :key="item.value" v-model="ruleForm.m0018ZbType" :label="item.value">{{item.label}}</el-radio>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="6">
            <el-form-item label="径流站名称：" prop="m0008Zhan">
              <el-input v-model="ruleForm.m0008Zhan" placeholder="请点击选择径流站" @click.native="addClient" readonly />
            </el-form-item>
          </el-col>
          <!-- 三级级联 选完径流站之后查出来-->
          <el-col :span="10">
            <el-form-item label="所属站点：">
              <el-input v-model="ruleForm.suoShuZhanDian" readonly />
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
       <!-- 选择设备设施组件 -->
    <sheShiSheBeiDialog ref="sheShiSheBei" @selectSheBeiSheShi="selectSheBeiSheShi"></sheShiSheBeiDialog>
    </el-form>
   
    <el-Row v-if="ruleForm.m0018ZbType === '1'">
      <LinDiVue :formData="ruleForm" zhanName="径流站"></LinDiVue>
    </el-Row>
    <el-Row v-if="ruleForm.m0018ZbType === '2'">
      <GuanCaoDiVue :formData="ruleForm" zhanName="径流站"></GuanCaoDiVue>
    </el-Row>
    <el-Row v-if="ruleForm.m0018ZbType === '3'">
      <NongDiVue :formData="ruleForm" zhanName="径流站"></NongDiVue>
    </el-Row>
  </div>
</template>

<script>
import SiteSelector from '@/components/SiteSelector'
import LinDiVue from './components/LinDi'
import NongDiVue from './components/NongDi'
import GuanCaoDiVue from './components/GuanCaoDi'
import sheShiSheBeiDialog from '@/components/sheShiSheBeiDialog';
export default {
  name: "jiBenXinXiEdit",
  components: { SiteSelector, LinDiVue, NongDiVue, GuanCaoDiVue ,sheShiSheBeiDialog},
  data() {
    return {
      ruleForm: {
        m0008Zhan:"",
        suoShuZhanDian: "",
        dynamicItem: [{}],
        m0018ZbType: '',
      },
      rules: {

      },
      tableDataOne:{},
      options: [{
        value: '1',
        label: '林地'
      }, {
        value: '2',
        label: '灌草地'
      }, {
        value: '3',
        label: '农地'
      }],
      statusOptions: [{
        value: '1',
        label: '正常'
      }, {
        value: '2',
        label: '维修中'
      }, {
        value: '3',
        label: '损坏'
      }, {
        value: '4',
        label: '淘汰'
      }]
    };
  },
  methods: {
    addClient() {
      // 打开组件的时候传设施设备类型
      this.$refs.sheShiSheBei.showDialog(this.dataEnum.SHE_SHI, this.dataEnum.jingLiuXiaoQu)
    },
    selectSheBeiSheShi(data) {
      this.ruleForm.m0008Zhan = data.m0018Name;
      this.ruleForm.suoShuZhanDian = data.zhanDianName;
      this.tableDataOne = data;
    },
  },
  watch: {}
};

子：

<div>
  <div style="text-align:center;margin-bottom:20px; font-weight:800; font-size:18px">
   <h3 style="text-align: center">
         
         <span v-if="!ruleForm.suoShuZhanDian || ruleForm.suoShuZhanDian.length < 1">____</span>
          <span v-else>{{ ruleForm.suoShuZhanDian.toString().replaceAll(',', '/') }}</span>
          站
          
           <span v-if="!ruleForm.m0008Zhan || ruleForm.m0008Zhan.length < 1">____</span>
          <span v-else>{{ ruleForm.m0008Zhan.toString().replaceAll(',', '/') }}</span>
           基本情况（林地）
        </h3>
                
  </div>
  <el-form :model="ruleForm" :rules="rules" label-width="0px" ref="ruleForm" class="demo-ruleForm">
    <table border class="listed" cellpadding="0" cellspacing="0" style="width:100%">
        <tr style="height:70px; border:0">
            <td rowspan="2" style="width:100px">小区</td>
            <td rowspan="2" style="width:100px">顺序</td>
            <td rowspan="2" style="width:150px">操作</td>
        </tr>
        <tr style="height:60px; border:0"></tr>

        <tr v-for="(item, index) in ruleForm.dynamicItem" :key="item.t0018Id" style="border:0">
            <td>
              <el-form-item :prop="'dynamicItem.' + index +  '.t0018Id'" :rules="[{required:true,message:'请填写小区号',trigger:'blur'}]" >
                  <el-input v-model="item.t0018Id" maxlength=""></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                  :prop="'dynamicItem.' + index +  '.t0018PoDu'"
                  :rules="[{required:true,message:'请填写坡度',trigger:'blur'}]"
              >
                  <el-input  v-model.number="item.t0018PoDu" maxlength="5"></el-input>
              </el-form-item>
            </td> <td>
                <el-button v-show="index > 0" @click="upward(index)" size="mini">↑</el-button>
                <el-button v-show="index+1 < ruleForm.dynamicItem.length" @click="downward(index)" size="mini">↓</el-button>
            </td>
            <td>
                <el-button @click="addItem" type="primary" icon="el-icon-plus" circle size="mini"></el-button>
                <el-button @click="deleteItem(item, index)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
            </td>
        </tr>
    </table>
    <el-row>
      <div class="sub_btn">
        <el-button type="success" @click="save()">保存</el-button>
        <el-button @click="goBack()">返回</el-button>
      </div>
    </el-row>
  </el-form>
</div>
</template>

<script>
export default {
  name:'LinDiVue',
  props:{
    formData:{
      type:Object,
      default:{
        zhanDianName:[],
        m0018ZbType:'',
        m0008Zhan:"",
        suoShuZhanDian: "",
      }
    },
    zhanName:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      ruleForm:{
        m0008Zhan:"",
        suoShuZhanDian: "",
        zhanDianName:[],
        dynamicItem:[{
          t0018Id:1,
          t0018PoDu:'',
          t0018PoChang:'',
          t0018PoKuan:'',
          t0018XqMj:'',
          t0018PoXiang:'',
          t0018TuLeiXing:'',
          t0018TuCeng:'',
          t0018ShuiBao:'',
          t0018LinShuZhong:'',
          t0018LinZaoFa:'',
          t0018LinZhuJu:'',
          t0018LinShuLing:'',
          t0018LinJunGao:'',
          t0018LinJunXiong:'',
          t0018LinJunGuan:'',
          t0018LinBiDu:'',
          t0018LinZhiBei:'',
          t0018LinZhuLei:'',
          t0018LinGaiDu:'',
          t0018LinJunGao:''
        }],
        m0018ZbType:'',
      },
      rules:{

      }
    }
  },
  watch:{
    formData:{
    handler(newVal){
           console.log(newVal,'uuuuuuuu');
           this.ruleForm.m0008Zhan = newVal.m0008Zhan
           this.ruleForm.suoShuZhanDian = newVal.suoShuZhanDian
    },
    immediate:true
    }
  },
  methods:{
    // 保存
    save(){},
    // 返回
    goBack(){
      this.$router.go(-1)
    },
    // 增加
    addItem() {
      const leng = this.ruleForm.dynamicItem.length + 1
      this.ruleForm.dynamicItem.push({
          t0018Id:leng,
          t0018PoDu:'',
          t0018PoChang:'',
          t0018PoKuan:'',
          t0018XqMj:'',
          t0018PoXiang:'',
          t0018TuLeiXing:'',
          t0018TuCeng:'',
          t0018ShuiBao:'',
          t0018LinShuZhong:'',
          t0018LinZaoFa:'',
          t0018LinZhuJu:'',
          t0018LinShuLing:'',
          t0018LinJunGao:'',
          t0018LinJunXiong:'',
          t0018LinJunGuan:'',
          t0018LinBiDu:'',
          t0018LinZhiBei:'',
          t0018LinZhuLei:'',
          t0018LinGaiDu:'',
          t0018LinJunGao:''
      });
    },

    // 删除
    deleteItem(item, index) {
        this.ruleForm.dynamicItem.splice(index, 1);
    },

    upward(index){
      let array = this.ruleForm.dynamicItem;
      [array[index],array[index-1]] = [array[index-1],array[index]];
      array.splice(0,0);
    },

    downward(index){
      let array = this.ruleForm.dynamicItem;
      [array[index],array[index+1]] = [array[index+1],array[index]];
      array.splice(0,0);
    },
  }

}
</script>