父传子 动态监测
父组件部分:
// 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中定义的对象进行重新赋值,然后在绑定到子组件的标签中,这样就可以解决这个问题
网友评论