vue初步學習，零散記錄

針對vue中控制項的用法

首先   初步用法

 動態切換不同的組件

在掛載點使用component標簽，然後使用v-bind:is=”組件名”，會自動去找匹配的組件名，如果沒有，則不顯示；

 改變掛載的組件，只需要修改is指令的值即可

//常規使用方式
<div id="app">  
    <button @click="toshow">點擊讓子組件顯示</button>  
    <component v-bind:is="which_to_show"></component>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        data: {  
            which_to_show: "first"  
        },  
        methods: {  
            toshow: function () {   //切換組件顯示  
                var arr = ["first", "second", "third", ""];  
                var index = arr.indexOf(this.which_to_show);  
                if (index < 3) {  
                    this.which_to_show = arr[index + 1];  
                } else {  
                    this.which_to_show = arr[0];  
                }  
            }  
        },  
        components: {  
            first: { //第一個子組件  
                template: "<div>這裡是子組件1</div>"  
            },  
            second: { //第二個子組件  
                template: "<div>這裡是子組件2</div>"  
            },  
            third: { //第三個子組件  
                template: "<div>這裡是子組件3</div>"  
            },  
        }  
    });  
</script>  

 //曾使用過的方法   

<button-control ref="buttonControl" @childDel="showDelTopicPop(index)" v-if="teachingType === 1" :tag="0" :currentIndex="index" :prepareLessonId="prepareLessonId" :topicList="topicList"></button-control>

 <component :is="topic.templateCodeTemp" :detailFilePath="topic.detailFilePath" :tag="1"></component>

   components:{
    noData,
    'passagereading':PassageReading,//根據不同的templateCodeTemp進行匹配不同的組件

  'situationalvideopresentation':SituationalVideoPresentation,
    commonPop
  },