您可以将外部函数作为道具传递给 Vue 组件吗？

Question

我有一个主要用 PHP 构建的遗留代码库。我正在研究如何将代码的常用部分转换为可重用的 Vue 组件，可以根据需要插入。

在一种情况下，我在 html 中有一个 onclick 事件，它需要单独传递给子组件。 onclick="func()"

我希望能够将该函数从标记传递给组件，而不是将这个一次性使用函数定义为组件或其父级的属性方法。

我在 Vue 文档或其他地方找不到有关如何执行此操作的任何内容。我所做的每一次尝试都会出错：

属性或方法“hi”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

有没有办法将全局范围内的外部定义函数传递给 Vue 实例？

Vue 选项卡：

Vue.config.devtools = true;


Vue.component('tabs', {
  template: `
    <div class="qv-tabs">
      <div class="tab">
        <ul>
          <li v-for="tab in tabs"
              :class="{'is-active' : tab.isActive}"
              @click="tab.callHandler"
          > 
            <a :href="tab.href" @click="selectTab(tab)">{{tab.name}}</a>
          </li>
        </ul>
      </div>
      <div class="tab-content">
        <slot></slot>
      </div>
    </div>
  `,
  data(){
    return{
      tabs: []
    };
  },
  created(){
    this.tabs = this.$children;
  },
  methods:{
    selectTab(selectedTab){
      this.tabs.forEach(tab => {
        tab.isActive = (tab.name == selectedTab.name);
      });
    },
    otherHi() {
      alert('other hi');
    }
  }
});

Vue.component('tab', {
  template: `
    <div v-show="isActive">
      <slot></slot>
    </div>
  `,
  props: {
    name: {required: true},
    selected: {default: false},
    callHandler: Function,
    clickHandler: {
      type: Function,
      default: function() { console.log('default click handler') }
    }
  },
  data(){
    return{
      isActive: false
    }
  },
  methods: {
    callHandler() {
      console.log('call handler called');
      this.clickHandler();
    }
  },
  computed:{
    href(){
      return '#' + this.name.toLowerCase().replace(/ /g, '-');
    }
  },
  mounted(){
    this.isActive = this.selected;
  }
});

new Vue({
  el: '.app',
  methods: {
    vueHi() { alert('hi from vue'); }
  }
});

function hi() {
  alert('hi!');
}

标记：

<div class="app">
    <tabs>
      <tab name="Tab 1" :selected="true" v-bind:call-handler="hi">
        <p>Tab content</p>
      </tab>
      <tab name="Tab 2">
        <p>Different content for Tab 2</p>
      </tab>
    </tabs>
  </div>

Answer 1

你可以在你的组件中这样定义你的方法：

...
methods: {
   hi
}
...

但是您必须在需要此功能的每个组件中定义它。也许你可以使用一个 mixin 来定义你想要从你的组件访问的方法，并在这些组件中使用这个 mixin？ https://vuejs.org/v2/guide/mixins.html

另一个解决方案（取决于您尝试实现的目标）是将您的方法添加到 Vue 原型中，如下所述： https://vuejs.org/v2/cookbook/adding-instance-properties.html

Vue.prototype.$reverseText = function(string) {
  return string.split('')
    .reverse()
    .join('')
}

通过在 Vue 原型中定义此方法，您可以在所有组件模板中使用这样的 reverseText 方法：

...
<div> {{ $reverseText('hello') }} </div>
...

或者从你的脚本中使用this：

methods: {
  sayReverseHello() {
    this.$reverseText('hello')
  }
}