Question

我是vue.js的新手，请原谅我，如果我写的东西对你没有意义。我不完全清楚如何在.vue文件组件中使用render函数。

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

Answer 1

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

Vue.js在.vue文件中呈现函数

1 个答案: