.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來創建重復的部分。