你的位置:首页 > Java教程

[Java教程]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
},