Question

我是VueJS和Web开发的新手。我正在做一个将Vue组件显示为卡片的项目。我希望将此Web应用程序变成SPA，一次只能显示1张卡。

是否可以在其中键入诸如搜索字段之类的内容（例如在卡中找到名称或一些文本），然后显示该卡。如果不清楚，请提前抱歉。这也是创建此卡的多个实例的最佳方法吗？谢谢！

Vue.component('blog-card', {
   template: '#blog-card',
   data: function data() {
      return {
      name: 'LeBron James',
      category: 'Slasher',
      image: 'http://ak-static.cms.nba.com/wp- 
      content/uploads/headshots/nba/latest/260x190/2544.png',
      author: '99',
      desc: '23 Badges'
  };
 }
});

Vue.component('blog-card2', {
  template: '#blog-card',
   data: function data() {
      return {
      name: 'Steph Curry',
      category: 'Shot Creator',
      image: 'http://ak-static.cms.nba.com/wp-content/uploads/headshots/nba/latest/260x190/201939.png',
      author: '96',
      desc: '15 Badges'
    };
  }
});

new Vue({
  el: '#container'
});

Answer 1

您可以使用道具（名称，类别，说明等）为通用卡创建Vue组件。然后将模板放置在您的主要vue应用中并填充其道具。这样，您就不会在组件上多余了。

Vue.component('blog', {
props:  [   name: String,
            category: String,
            image: String,
            age: Number
        ],
template: '<h3>{{ name }}</h3>
            <span>{{ category }}</span>
            <img v-bind:src="image">
            <span>{{ age }}</span>'})

https://vuejs.org/v2/guide/components-props.html

Answer 2

我认为您可以使用props，并且我认为这是最简单的方法，因为看起来您只是在更改数据，但是如果您需要呈现不同的组件，则可以使用component指令来实现，如下所示：< / p>

<component v-bind:is="currentComponent"></component>

因此，您可以通过这种方式创建一个名为search或类似名称的微型表单，一旦提交，就可以更新currentComponent属性，从而可以渲染需要呈现的组件。这实际上是在文档上：

https://vuejs.org/v2/guide/components-dynamic-async.html

如何为Vue组件创建过滤器

2 个答案: