Vue.jsファイルを.vueファイルにレンダリングする

Question

私はvue.jsで新しく書いたものがあなたにとって意味をなさない場合、私を許します。 .vueファイルコンポーネントの内部でレンダリング関数を使用する方法は私には完全にはわかりません。

私はこのような.vueファイル内のコンポーネントを得た：基本的に私は、交互にこの1へのコンテンツ（「アイテム」）を送り、3成分を有していて、MIの目標は、内部の順不同リストをレンダリングすることです

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

すべてのリスト要素の中に "@ click = 'doSomenthing'"指示文があり、 "doSomething"は項目をこの要素に送信したコンポーネントによって異なります。 何か助けていただければ幸いです

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/

あなたは複雑なアクションを書いているなら、あなたは、各リストの種類の別々のコンポーネントを作成することもできます、ではなくステートメントでは、mixinを使用して重複セクションを作成できます。