动态组件与v-on

心已赠人 2022-05-24 02:36 44阅读 0赞

实现点击按钮切换内容  
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript" src="js/vue.js" ></script>  
</head>  
<body>  
<div id="root">  
<child-one v-if=" type ==='child-one'"></child-one>  
<child-two v-if=" type ==='child-two'"></child-two>  
<button @click="handleBtn">change</button>  
</div>  
<script>  
Vue.component('child-one',\{  
template:'<div>child-one</div>'  
\})  
Vue.component('child-two',\{  
template:'<div>child-two</div>'  
\})  
var vm = new Vue(\{  
el:"\#root",  
data:\{  
type:'child-one'  
\},  
methods:\{  
handleBtn:function  () \{  
this.type=(this.type==='child-one'?'child-two':'child-one')  
\}  
\}  
  
\})  
</script>  
  
</body>  
</html>  
  
  
  
  
<template :is="type"></template>//template是动态组件，会根据is里面数据的动态变化，来自动加载不同的组件  
  
  
  
  
//v-once可以提高性能，在切换的过程中，把不显示的内容放入缓存  
Vue.component('child-one',\{  
template:'<div v-once>child-one</div>'  
\})  
Vue.component('child-two',\{  
template:'<div v-once>child-two</div>'  
\})

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 动态组件与异步组件：深入理解与全面应用

Vue 动态组件与异步组件：深入理解与全面应用；Vue；Vue组件；动态组件；异步组件

约定不等于承诺〃/ 2024年04月20日 12:07/ 0 赞/ 68 阅读

相关 Vue 动态组件

动态组件通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件： var vm = new Vue

傷城~/ 2023年06月18日 03:54/ 0 赞/ 30 阅读

相关 Vuejs——（12）组件——动态组件

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u52A8\_u6001\_u7EC4\_u4EF6 本文

古城微笑少年丶/ 2022年09月25日 12:15/ 0 赞/ 304 阅读

相关【Vue】—动态组件

【Vue】—动态组件 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiB

迈不过友情╰/ 2022年09月11日 12:22/ 0 赞/ 256 阅读

相关 Vue动态组件

Vue动态组件 1、序言 2、实例 1、序言在页面应用程序中，经常会遇到多标签页面，在Vue.js中，可以通过动态组件来实现。组件的动态切换是通

╰+攻爆jí腚メ/ 2022年08月30日 01:56/ 0 赞/ 261 阅读

相关动态组件与v-on

实现点击按钮切换内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title

心已赠人/ 2022年05月24日 02:36/ 0 赞/ 45 阅读

相关 Vue_动态组件与v-once指令

一.component动态组件动态组件是根据判断值决定是否显示该组件`<component>` 根据is的值来显示相应的组件是否应该显示使用的方法： <co

超、凢脫俗/ 2022年05月20日 21:59/ 0 赞/ 200 阅读

相关动态组件&异步组件

动态组件&异步组件动态组件在动态组件中使用keep-alive 异步组件处理加载状态动态组件在动态组件中使用kee

水深无声/ 2021年10月20日 01:22/ 0 赞/ 469 阅读

相关 vue——动态组件

通过使用保留的 `<component>` 元素，动态地绑定到它的 `is` 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组

ゞ浴缸里的玫瑰/ 2021年09月14日 12:58/ 0 赞/ 497 阅读

相关 vue 动态组件

1、引入组件,并在components中注入 2、动态组件 <component :is='x'></component> is

矫情吗；*/ 2021年07月24日 23:23/ 0 赞/ 532 阅读