在Vue JS中,当我在父组件上按下Button时,如何刷新子组件的方法?

whlutmcx  于 7个月前  发布在  Vue.js
关注(0)|答案(2)|浏览(98)

我有一个提交按钮,在父组件中的表单字段中有一个选择选项现在,当用户更改选择选项时,它将采用该值并在子组件中执行方法/函数。每当他更改时,我希望自动更新子函数。

<select>
  <option value="www.google.com">google</option>
  <option value="www.facebook.com">facebook</option>
  <option value="www.twitter.com">twitter</option>
 
</select>

<button> Submit </button>

字符串
现在,当有人按下提交按钮时,它将在Child组件上执行一个函数

export default {
  name: 'child',
  data () {
    return {
      title: 'Child',
    }
  },
  methods: {
    doSomething: function (url) {
     var newurl = url;
      
    }
    }
}


因此,当按下按钮时,时间doSomething方法将使用所选值执行。

qcuzuvrc

qcuzuvrc1#

您可以使用global event bus机制进行父子通信。这里有一篇文章深入介绍了如何实现这一点。
https://alligator.io/vuejs/global-event-bus/

brqmpdu1

brqmpdu12#

你的问题不太准确。
是否只想从父组件触发子组件方法?在这种情况下,从父组件中,给予一个引用到子组件,然后按以下方式调用子组件方法:

this.$refs[child-component-ref].doSomething()

字符串
如果需要从父select元素向子方法传递值,请将此值添加到方法调用中:

this.$refs[child-component-ref].doSomething(my select value)

相关问题