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，

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。