Vue JS 中父组件按下按钮时如何刷新子组件的方法？

Question

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

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

现在，当有人按下提交按钮时，它将在子组件上执行一个函数

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

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

Answer 1

可以利用

global event bus

机制进行亲子沟通。这是一篇文章，深入介绍了您应该如何实现这一点。

https://alligator.io/vuejs/global-event-bus/

Answer 2

你的问题不太准确。

您只想从父组件触发子组件方法吗？ 在这种情况下，从您的父组件中，为您的子组件提供引用，然后以这种方式调用子组件方法：

this.$refs.<child-component-ref>.doSomething()

如果您需要从父选择元素传递值，请将此值添加到您的方法调用中：

this.$refs.<child-component-ref>.doSomething(my select value)