美文网首页
动态监测父组件传递给子组件的值

动态监测父组件传递给子组件的值

作者: 梁庄十年 | 来源:发表于2019-05-31 23:33 被阅读0次

    父传子 动态监测

    父组件部分:

    // 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中定义的对象进行重新赋值,然后在绑定到子组件的标签中,这样就可以解决这个问题

    相关文章

      网友评论

          本文标题:动态监测父组件传递给子组件的值

          本文链接:https://www.haomeiwen.com/subject/hsvntctx.html