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文件中的函數

回答

相關問題