Question

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

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

dataObj作为道具传递，如下所示：

<plan-single-job :dataObj="dataObj"/>

，并且按钮位于“计划单工”组件内部。该组件还具有一个数据参数，称为“ edit_mode”，它是布尔类型。

在我的根组件中，我有一个函数声明“ savePlan（obj）”。按下“计划单工”中的按钮时，将调用root中的savePlan方法，并传递对象dataObj。

我的问题是，是否有一种方法可以从“ dataObj”对象访问组件“计划单身工作”数据？

保存计划：

savePlan: function(obj) {
  console.log(obj);
  console.log(obj.edit_mode); // ?
}

计划单一职位组成部分

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

Answer 1

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

模板：

<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
      })
    }
  }
})

然后您可以在$root

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

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

1 个答案: