Javascript VueJS将对象传递给根组件函数

我正在应用程序的HTML模板中使用VueJS。
单击按钮将组件的对象传递到其根组件，如下所示：

<button v-on:click="$root.savePlan(dataObj)"></button>

计划单个作业组件

Vue.component('plan-single-job',{
  template: "#plan-single-job",
  props: {
    dataObj: {
      type: Object,
      default: {},  
    },
  },
  data: function(){
    return{
      edit_mode: false,
    }
  }
})

---

您应该使用本地方法，而不是在模板中引用根方法

模板：

<button v-on:click="localMethod"></button>

Vue.component('plan-single-job',{
  template: "#plan-single-job",
  props: {
    dataObj: {
      type: Object,
      default: {},
    },
  },
  data: function(){
    return{
      edit_mode: false,
    }
  },
  methods: {
    localMethod: function () {
      this.$root.savePlan(this.dataObj, {
        edit_mode: edit_mode
      })
    }
  }
})

---

然后，您可以在

dataObj

之后将任何初始数据传递给

$root

方法。您应该使用本地方法，而不是在模板中引用root方法

模板：

<button v-on:click="localMethod"></button>

Vue.component('plan-single-job',{
  template: "#plan-single-job",
  props: {
    dataObj: {
      type: Object,
      default: {},
    },
  },
  data: function(){
    return{
      edit_mode: false,
    }
  },
  methods: {
    localMethod: function () {
      this.$root.savePlan(this.dataObj, {
        edit_mode: edit_mode
      })
    }
  }
})

---

在使用

ref

尝试

dataObj
之后，您可以将任何初始数据传递给
$root
方法。我在根组件中有一个for循环，用于“计划单个作业”因此，调用的每个组件的ref都应该更改。请避免下次使用不相关的标记…是否尝试使用
ref
？我在根组件中为“计划单个作业”设置了for循环，因此调用的每个组件的ref都应该更改。请避免下次使用不相关的标记。。。