BaiqiCMS V1.2.5 正式版

VUE以下场景开发中，需要父组件传值给子组件，在子组件中修改值同时传递给父组件，使用是的父组件通过 props 传递给子组件参数值，子组件通过watch监听子组件修改的值用 this.$emit定义方法把值传递给父组件，但是当父组件每次修改值时，子组件接收第一次未同步更新，总是慢一步，获取到的是上一次传入的数据。经过查询代码发现，原来是子组件未监听父组件传来的值变化，只是监听了子组件的值变化。相关代码如下：

父组件

<template>
  <div>
    <subwords :init-ele="draggingElement" @setElementNode="setElementNode(arguments)"></subwords>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      draggingElement: {}
    }
  },
  methods: {
    setElementNode(arg) {
      // 父组件定义方法，接收子组件传递的修改后的参数和值
      console.log(arg)
    }
  }
}
</script>

子组件

<template>
  <div>
    <div v-for="(item,index) in ele">
      {{item}}
    </div>
  </div>
</template>

<script>
export default {
  name: "subbarcode",
  props: {
    initEle: {
      type: Object
    },
  },
  data() {
    return {
      // 子组件重新定义一个参数接收父组件的值，从而不直接影响父组件的值
      ele: this.initEle
    }
  },
  watch: {
    ele: {
      handler(newData) {
        // 监听子组件的ele参数，通过父组件定义的函数，把newData的值传递给父组件，多个参数值的后面用逗号隔开，父组件通过数组的方式接收
        this.$emit("setElementNode", newData);
      },
      deep: true,
    },
    initEle: {
      handler(val) {
        // 监听父组件传递过来的initEle,父组件initEle每次值改变后，子组件的值也改变
        this.ele = val
      }
    }
  }
}