父传子 动态监测

父组件部分：

// html部分
<template>
  <div id="home">   
     <div>
        <el-select v-model="sendParams.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="sendParams.value1" multiple   collapse-tags placeholder="请选择">
            <el-option
              v-for="item in sendData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
    </div>
    <echarts :sendParams='sendParams'></echarts>
  </div>
</template>
// js部分
import echarts from '../views/charts.vue' // 引入子组件
export default {
  components:{
    echarts
  },
data:{
       options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        },],
       
        sendData:[ {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],       
        sendParams:{
          value: '',
          value1:[],
        }
}

子组件部分：

    props:['sendParams'],
    watch:{
        sendParams:{
            handler(newValue,oldValue) {
                console.log(newValue) //当父组件的值发生变化时，子组件的数据都会实时更新；可以在此处进行逻辑处理； 
            },
            deep:true // 因为传递过来的数据是对象 ，所以需要深度监听
        }
    }

注意：

此处用的是使用的是elmentui 的下拉框组件，实现了双向数据绑定，所以当你点击选取下拉框中的数据时，子组件的数据就已经发生了变化；如果想避免这种情况，可以将data中定义的对象进行重新赋值，然后在绑定到子组件的标签中，这样就可以解决这个问题