Question

假设我有一个组件＆＃39; test-component＆＃39;有一个方法getGeoEmailData（）通过进行Ajax调用获取一些数据。如果我使用这样的组件：

<test-component v-bind:item="item" ></test-component>

我想自动调用getGeoEmailData（）（在父道具＆＃39; item＆＃39;已经绑定到组件道具＆＃39; item＆＃39;）我该如何做？

Answer 1

首先，如果你想从组件内部获取数据，你必须使用emit方法使用它来发出组件方法ex：

methods: {
  emitSomething () {
    this.$emit('foobar', 'some data')
  }
}

现在，您可以从组件中侦听侦听事件，并使用以下语法将其传递给本地方法：

<my-component v-on:foobar='handler'></my-component>

现在刚刚创建了一个名为handler的方法来获取从子节点发出的内容。

如果要在组件绑定到某个值时获取emit内容，只需使用观察者：{}来查看属性设置为true时的情况。

此示例将向您展示当item更改为true时，您可以从子组件获取发射。

Vue.component ('my-component', {
  template: `<p> </p>`,
  props: ['item'],
  watch: {
    item (val) {
      if(val) {
        this.getSomething(); 
      }
    }
  },
  methods: {
    getSomething () {
     this.$emit('onitembind', 'I AM EMITTED FROM CHILD')
    }
  }
})

new Vue({
  el: '#app',
  data () {
  	return {
      item: false
    }
  },
  methods: {
    acceptDataFromChild(event) {
     	console.log('event:', event)
    }
  }
})

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>

<div id="app">
  <button @click='item = !item'> {{ item ? 'stop' : 'get' }} data from child </button>
  <my-component :item='item' @onitembind='acceptDataFromChild'></my-component>
</div>

您可以检查您的控制台，看每当item道具更改为true时，将从子组件发出一个事件，并且父级使用acceptDataFromChild捕获它。停止是多余的，因为它只将项目状态切换为false。但这应该适合您的情况

Vue.js：如何在Component加载时自动调用组件方法？

1 个答案: