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

Question

I'm new with vue.js so forgive me if what I write does not make sense to you. It's not totally clear to me how to use render function inside a .vue file component.

I got a component in a .vue file like this:

<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>

Basically I have 3 component that alternately sends content ("items") to this one, mi goal is to render an unordered list inside it with a "@click='doSomenthing'" directive inside every list-element and "doSomething" depends on which is the component that sent the items to this one. Any help will be appreciated

Answer 1

Firstly, you do not put render functions inside components, you simply pass the data as a prop . If you need to know which component passed the list of items, then you can simply pass a prop to let your component know what action to take, here's a basic example:

<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>

You can then set the component up in our parent and pass an action, I'm just passing a number here:

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

Here's a JSFiddle: https://jsfiddle.net/uckgucds/

If you are writing complex actions then you may want to write separate components for each list type, rather than a switch statement, you can then use a mixin to create the duplicate sections.