vuejs2 - VueJs如何从Vue.component获取数据

Question

我想知道如何从Vue.component获取数据并将其发送到
这个>> var app = new Vue({})<<
这是我的代码

Vue.component('my-form', {
template: '#my-form',
props:['ddTechtemp'],
     data: function () {
     return {
        isCores: app.testCorres,
        activeClass: 'isCorrespon',
        errorClass: 'isTech',
        tempData : {cell1 : "",
                    cell2 : "",
                    cell3 : "",
                    cell4 : "",
                    cell5 : "",
                    cell6 : ""
        },
    }
},
watch:{
    tempData:{
        handler:function(newVal,oldVal){

            app.ddTechtemp = newVal;

        },
        deep:true,
    }

},
methods:{

}});

我想从上面的代码中获取数据并发送到此代码var app = new Vue({ data: Vue.component.data}) 有人了解我，请帮忙。谢谢

Answer 1

在Vue.js中，父子关系由

1)将 Prop 从 parent 传递给 child

2)从 child 向 parent 发出自定义事件

因此，如果您需要将某些数据从子级传递给父级，请使用this.$emit随数据一起发送自定义事件，然后使用v-on:myevent或@myevent速记在父级组件中监听此事件。与事件一起传递的数据可在$event变量中找到。

示例:https://jsfiddle.net/wostex/63t082p2/51/

<div id="app">
  <myform @newdata="handleData($event)"></myform>
  <p>name: {{ user.name }}</p>
  <p>age: {{ user.age }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    user: { name: '', age: 0 }
  },
  methods: {
    handleData: function(e) {
      [this.user.name, this.user.age] = e;
    }
  },
  components: {
    'myform': {
      template: `
      <div>
      <input type="text" v-model="formData.name" placeholder="Your name">
      <input type="number" v-model.number="formData.age">
      </div>`,
      data: function() {
        return { formData: { name: '', age: 0 } }
      },
      watch: {
        formData: {
            handler: function() {
              this.$emit('newdata', [this.formData.name, this.formData.age]);
          },
            deep: true
        }
      }
    }
  }
});