时间戳

首页 > 解决方案 > 我可以在回调方法中返回一个 Vue JS 组件吗？

javascript - 我可以在回调方法中返回一个 Vue JS 组件吗？

问题描述

假设我在 Vue.js 组件中有一个方法，它返回要呈现到页面上的字符串：

display: (arg) => {
    return arg.name
}

在相关的 HTML 中：

<div html="component.display(arg)">
</div>

到目前为止，这对我来说效果很好，但现在我想返回带有一些 Vue 绑定数据的 HTML：

display: (arg) => {
    return '<button @click="myMethod(arg)">Click</button>'
}

显然，上面的方法是行不通的。我的研究使我相信这里的正确方法是创建一个组件并返回它，但我似乎无法让它工作。我将如何解决这个问题？

标签： javascriptvue.js

解决方案

似乎您可以使该按钮成为自己的组件。

// New component
Vue.component('arg-button', {
  props: ['arg'],
  data: function () {
    return {
      arg: null
    }
  },
  myMethod: function(arg) {
    console.log(arg)
  },
  template: `
    <button 
      @click="myMethod(arg)">
        Click
    </button>`
})

// Old component
Vue.component('parent', {
  data: function () {
    return {
      arg: null,
      displayIfArg: true
    }
  },
  template: `
    <arg-button 
      v-show="displayIfArg"
      :arg="arg">
    </arg-button>`

})

您的总体方法是 Vue 解决的问题，而无需像这样返回函数作为字符串。有几种方法可以做到这一点 Vue 方式，但它大致涉及组件的条件实例化/显示——无论如何它应该很容易重用，所以认为你需要基于arg 自身的回报可能比它的价值更麻烦。

组件首先应该是可重用的和原子的。阅读他们的文档，尤其是。在组件上，它会带来很多亮点。

推荐阅读