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)将道具从父母传递给孩子

2)从孩子到父母发出自定义事件

因此,如果您需要将一些数据从子节点传递给父节点 - 用于使用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
        }
      }
    }
  }
});