.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 个组件交替发送内容（“项目”）到这个组件，我的目标是在其中呈现一个无序列表，每个列表元素中都有一个“@click='doSomenthing'”指令，而“doSomething”取决于这是将项目发送到此的组件。 任何帮助将不胜感激

Answer 1

首先，您不要将render functions放在组件中，您只需将数据作为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来创建重复的部分。