Question

VueJS的新功能。我正在尝试为可通过自定义道具（最好是字符串，但不一定是）填充和更新的网页构建自定义ul组件，尤其是在HTML中，以便任何其他开发人员都可以简单地使用/更新/添加到带有所述道具的自定义组件中，它将通过添加第二，第三，第四等道具来添加新的li，并附加先前的li。我也在努力查看自定义道具是否可以使用多个输入类型。为了获得更好的解释，这里是我目前拥有和想要做的事情的编码示例：

Vue.component('resources', {
 template: `
      <!-- Resources Component -->
      <div class="resources">
           <div class="heading">
                <p>Resources</p>
           </div>
           <ul class="resource-list">
                <li v-for="item in items">
                     <a :src="item[source]">{{ item.message }}</a>
                </li>
           </ul>
      </div>
 `,
 props: {
      source: {
           type: String,
           default: "."
      },
      message: {
           type: String
      }
 },
 data () {
      return {
           items: [
                { 
                     message: {
                          type: String
                     },
                     source: {
                          type: String,
                          default: "."
                     } 
                }
           ]
      }
   }
 });

在我的HTML中，组件如下所示：

<helpful-resources
       message="test"
       source="."
></helpful-resources>

这1000％的人有很多问题，但理想情况下，我希望有一些类似的东西：

<helpful-resources
       item: src="example url 1" message="test message 1"
       item: src="example url 2" message="test message 2"
></helpful-resources>

每增加一个新的“项目”，就会在前一个列表项之后附加一个新项，并具有根据需要反复更改src和消息的功能，但是列表中需要很多项。

任何帮助/说明将不胜感激。谢谢！

Answer 1

在父组件中：

<template>
    <div class="resources">
        <div class="heading">
            <p>Resources</p>
        </div>
        <Helpful-resources :listItems="listItems"></Helpful-resources>
    </div>
</template>

<script>
    @import HelpfulResources from '@/path/to/HelpfulResources';

    export default {
        name: 'Resource',
        components: {
            HelpfulResources 
        },
        data() {
            return {
                listItems: [
                  {src: 'link to item', message: 'special message'}, 
                  {src: 'link to item2', message: 'special message2'}, 
                  // More items ...
                ]
            }
        }
    }
</script>

<style lang="scss">
    /* styles */
</style>

您的组件可以这样构造： Helpful-resources.vue

<template>
    <ul class="resource-list">
        <li v-for="(item, index) in listItems" :key="'listItem-'+index">
            <a :href="item.src">{{ item.message }}</a>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'helpful-resource',
        props: [ 'listItems'],
        data() {
            return {
                // More data ...
            }
        }
    }
</script>

<style lang="scss">
    /* styles */
</style>

注意：这是采用vue-cli样式设置的，但是您可以对其进行修改以适合您的需求。

编辑

要将其包含在html文件中，您可以将Vue组件放置在body标记中，body标记正下方。


<div id="app">
  <resources :source="someData" :message="message" id="r"></resources>
</div>


 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>

    let resources = Vue.component('resources', {
   template: `<div class="resources">
                            <div class="heading"><p>Resources</p></div>
                <ul class="resource-list">
                    <li v-for="(item, index) in items" :key="index"><a :href="source">{{ item.message }}</a></li>
                </ul>
              </div>`,
   props: {
        number: Number,
        source: {
             type: String,
             default: "."
        },
        message: {
             type: String,
             default: 'No message'
        },
        // Example of multiple data types
        propB: [String, Number] 
   },
   data() {
         return {    
                items: [
                  { 
                       message: this.message,
                       source: this.source
                  }
             ]
         }
     }
   });

    new Vue({
      el: '#app',
      components: {
        resources
      },
      data: {
        someData: 'path/to/source',
        message: 'Special Message'
      },
    });
  </script>

反正这是小提琴的链接... Fiddle

就更新列表而言，您可以使用API调用来异步获取数据，或者允许用户通过按钮或输入来添加信息并使用方法。或者，如果您是在严格地对附加值进行硬编码，那么其他开发人员会在您的文件中添加...

希望这会有所帮助。如果没有，请澄清。

创建可通过HTML中的自定义道具更新的动态Vue列表

1 个答案: