javascript - .vue 文件中的 Vue.js 渲染函数

Question

我是 vue.js 新手，所以如果我写的内容对你来说没有意义，请原谅我。我并不完全清楚如何在 .vue 文件组件中使用渲染函数。

我在 .vue 文件中有一个组件，如下所示:

<template>
    <transition name="slide-fade">
        <div class="drop-list" v-html="items">
        </div>
    </transition>
</template>

<style>
</style>

<script>
    export default{
        name: "drop-item",
        props:['items'],
        data(){
            return{}
        },
        render(createElement) {
            // create the list
        }
    }
</script>

基本上我有3个组件，它们交替发送内容(“items”)到这个组件，我的目标是在每个列表元素中渲染一个无序列表，并在每个列表元素中使用“@click='doSomenthing'”指令和“doSomething” "取决于将项目发送到此组件的组件。任何帮助将不胜感激

Answer 1

首先，您不要将渲染函数放入组件内，您只需将数据作为prop传递。如果您需要知道哪个组件传递了项目列表，那么您可以简单地传递一个 prop 来让您的组件知道要采取什么操作，这是一个基本示例:

<template id="my-list">
  <div>
    <ul>
      <li v-for="item in items"><a href="#" @click="doSomething">{{item}}</a></li>
    </ul>
  </div>
</template>

<script type="text/javascript">
export default {
  props: ['items', 'action'],
  methods: {
    doSomething() {
      switch (this.action) {
        case 1:
          console.log("I'm doing action 1");
          break;
        case 2:
          console.log("I'm doing action 2");
          break;
        default:
          console.log("I'm doing default action");
      }
    }
  }
}
</script>

然后，您可以在我们的父级中设置组件并传递一个操作，我只是在此处传递一个数字:

<my-list :items="items" :action="2"></my-list>

这是一个 JSFiddle:https://jsfiddle.net/uckgucds/

如果您正在编写复杂的操作，那么您可能需要为每种列表类型编写单独的组件，而不是 switch 语句，然后您可以使用 mixin创建重复的部分。