针对vue中控件的用法首先 初步用法}) 子组件调用父组件的方法 和父组件传值入子组件子组件: 父组件 : 动态切换不同的组件在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找 ...
针对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
},
原标题:vue初步学习,零散记录
关键词:VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。