Vue动态组件和v-once指令的实现
首先,实现两个组件之间的相互显示和隐藏
!DOCTYPE htmlhtmlhead title动态组件/title script TYPe=' text/JAVAScript ' src=' http 3360。/vue-dev . js '/script/head body div id=' app ' child-one v-if=' type=' child-one ' content=' child-one '/child-one child-two v-if=' type=' child-two ' content=' child-two '/child-two button @ click=' handlechangevent ' change/button/div script type=' text/JavaScript ' vue.component(' child-one ',{ props: ['content'],template:Vue.component('child-two ',{ props: ['content'],template : ` div { { content } }/div `,}) var vm=new Vue({ el: '#app ',data(){ return { type : ' child-one ' }),methods : { handlechangevent 3360 function(){ this . type=this . type==' child-one '?'儿童二' : '儿童一';} } })/脚本/正文/html页面渲染如下:
第二,动态组件,简化页面代码
用法:父组件dom标记用于绑定组件名称
div id='app '!-child-one v-if=' type=' child-one ' content=' child-one '/child-one child-two v-if=' type=' child-two ' content=' child-two '/child-two-!-动态组件标签组件通过使用is-component : is=' type ' : content=' type '/component button @ click=' handlechangevent ' change/button/Div使用v-if或components实现动态组件。点击交互后,每次切换页面效果,都会自动销毁之前的组件,然后新建一个组件,页面会显示响应的内容,消耗性能。
Iii .电视节目和电视一次
使用v-show,它将只隐藏在dom元素中,组件将被创建。
在子组件中,添加了v-once。每次切换组件效果时,不再需要每次都经历创建-销毁的过程,而是直接访问内存中最后使用的组件的内容
Vue.component ('child-one ',{ template : ' div v-once child-one/div ' })vue.component(' child-two ',{ template 3360 ' div v v-once child-two/div ' })使用v-once,
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:Vue动态组件和v-once指令的实现是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。