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

我是vue.js的新手，所以如果我写的东西对你没有意义，请原谅我。我不完全清楚如何在.vue文件组件中使用渲染功能。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个组件交替发送内容（“项目”）这一个，MI的目标是内呈现无序列表它在每个list-element和“doSomething”内部都有一个“@ click ='doSomenthing'”指令，取决于哪个组件将项目发送到这个组件。任何帮助将不胜感激

来源

2017-01-19 Plastic

对不起，但你的问题不是很清楚，它很抽象 - 改进它会帮助别人来帮助你。 –

你应该使用'props'来获取项目，然后使用'computed'来动态地呈现列表。这里不需要'render（）'方法。 –

@DovBenyominSohacheski：我会尝试，我怎么知道哪个组件发送了这些“项目”？ – Plastic

首先，你不要把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创建重复节。

来源

2017-01-19 14:18:54

你救了我的一天！ ;） – Plastic

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

回答

相关问题