Question

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

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

并在相关的HTML中：

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

到目前为止，这对我来说还算不错，但是现在我想返回HTML，其中包含一些Vue绑定的数据：

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

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

Answer 1

似乎您可以将该按钮设为自己的组件。

// 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 自身为基础 em>可能比它的价值还要麻烦。

首先，组件应该是可重用的并且是原子的。阅读他们的docs，尤其是。在组件上，它会带来很多启发。

Answer 2

我认为您追求的是dynamic component。

我将使用计算属性来返回组件定义以利用Vue的反应性（方法始终运行，仅在需要时才使用计算属性）

<component :is="display" :arg="arg" @click="myMethod"></component>

和...

computed: {
  display () {
    // you weren't clear on the conditions
    // that should cause this to return something different
    // but here is where you would put them
    return {
      props: ['arg'],
      template: `<button @click="$emit('click', arg)">Click</button>`
    }
  }
}

我在这里假设myMethod是在 parent 中定义的，因此在@click和<component>的{{1}}处理程序中添加了$emit处理程序。孩子。

我想您可以使用一种方法来返回组件定义，但这似乎效率很低，并且可能有更好的方法来实现。

我可以通过回调方法返回Vue JS组件吗？

2 个答案: