• Vue中is属性的用法 可以动态切换组件


    is 是组件的一个属性,用来展示组件的名称
    is和component联用哈
    vue提供了component来展示对应的组件名称
    compont是一个占位符,is这个属性,用来展示对应的组件名称

    三个子组件

    <template>
    	  <div>
    	    <h2>我是登录组件</h2>
    	  </div>
    </template>
    	
    <template>
    	  <div>
    	    <h2>我是注册组件</h2>
    	  </div>
    </template>
        
    <template>
    	  <div>
    	    <h2>遇见问题</h2>
    	  </div>
    </template>
    
    ##在某个页面中使用组件##
    	<template>
    	  <div>
    	    <!-- is属性的使用 -->
    	    <div class="box">
    	      <div class="link-a" @click="comName='login'">登录</div>
    	      <div class="link-a" @click="comName='resgister'">注册</div>
    	      <div class="link-a" @click="comName='mett'">遇见问题</div>
    	    </div>
    	
    	    <component :is="comName"></component>
    	  </div>
    	</template>
    	
    	<script>
    	import login from "../../components/logincom/login";
    	import resgister from "../../components/logincom/register";
    	import mett from "../../components/logincom/mett";
    	
    	export default {
    	  data() {
    	    return {
    	      comName: "login"
    	    };
    	  },
    	  components: {
    	    resgister,
    	    login,
    	    mett
    	  }
    	};
    	</script>
    	
    	<style  scoped>
    	.box {
    	  display: flex;
    	}
    	.link-a {
    	   80px;
    	  height: 40px;
    	  text-align: center;
    	  line-height: 40px;
    	  background: pink;
    	  margin-left: 20px;
    	}
    	</style>
    

    可以向tab栏一样去切换组件哈

  • 相关阅读:
    Set和Multiset 怎么用咧↓↓↓
    sql server 复习笔记2
    sql server 复习笔记1
    数据分析相关学习 -1 numpy
    复习2
    scrapy 4 学习 crawl spider
    scrapy3 中间件的使用
    scapy2 爬取全站,以及使用post请求
    复习1
    scrapy 学习笔记2 数据持久化
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12116990.html
Copyright © 2020-2023  润新知