父子组件传值传过去的数组不能实时更新watch监听

最新推荐文章于 2023-02-16 17:26:06 发布

原创最新推荐文章于 2023-02-16 17:26:06 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文展示了在Vue.js中，父组件如何通过点击事件将数据传递给子组件，并触发子组件的响应式更新。父组件通过`@click`监听按钮点击，传递`equipmentId`给子组件`addContact`。子组件则在`props`中接收`eqId`，并在`watch`及`created`钩子中监听并处理该值的变化，调用`getEquipmentFun`方法获取相关设备信息。

1.父组件

代码如下（示例）：

<el-button @click="handleClick(scope.row.equipmentId)" type="text" size="small">查看</el-button>
<add-contact :eqId = 'eqId'></add-contact>

<script>
import addContact from './addContact.vue'
export default {
  name: "addDevice",
  data() {
    return {
      eqId:''
   } 
  }，
  components:{
    addContact
  },
  methods:{
    handleClick(id){
      // console.log(id)
      this.eqId = id
      this.dialogVisible = true
    },
  }
}
</script>

2.子组件

代码如下（示例）：

<script>
    export default {
        props:['eqId'],
        watch:{
            eqId(eqId){
              // console.log(this.eqId,'789')
              this.getEquipmentFun(eqId);
            }
        },
        created(){
            this.getEquipmentFun(this.eqId);
        }
    }
</script>