首页 > 其他分享 >vue(五)-cnblog

vue(五)-cnblog

时间：2023-02-04 11:37:31浏览次数：40  
标签：vue color 组件 20px left cnblog Left

vue(五)

1.动态组件

  • 组件的显示与隐藏切换

1.1 <component> 组件

  • 组件的一个占位符
  • 通过设置属性来显示不同的组件
  • is属性来指定要显示哪个属性

示例

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->

      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->

      <component is="Left"></component>

      <!-- <Left></Left> -->
    </div>
  </div>
</template>

<script>
// 导入left组件

import Left from "@/components/Left.vue"
export default {

  components:{
    Left
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
  • 效果图

示例：组件按需切换

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <!-- 实现按需切换组件 -->

      <button @click="comName='left'">展示left组件</button>
      <button @click="comName='Right'">展示Right组件</button>

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->

      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->

      <component :is="comName"></component>

      

      <!-- <Left></Left> -->
    </div>
  </div>
</template>

<script>
// 导入left组件

import Left from "@/components/Left.vue"

// 导入Right组件

import Right from "@/components/Right.vue"
export default {

  // 使用data存储要展示的组件名称

  data(){
    return {
      comName:'left'  
    }
  },

  components:{
    Left,
    Right
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
  • 效果图

1.2 组件被切换时

  • 默认会被销毁和创建

  • left组件

<template>
  <div class="left-container">
    <h3>Left 组件----------{{count}}</h3>
    <button @click="count+=1">+1</button>
  </div>
</template>

<script>
export default {

  data(){
    return {
      count:0
    }
  },

  created(){
    console.log('left组件被创建');
  },

  destroyed(){
    console.log('left组件被销毁');
  }
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
  • app根组件
<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <!-- 实现按需切换组件 -->

      <button @click="comName='left'">展示left组件</button>
      <button @click="comName='Right'">展示Right组件</button>

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->

      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->

      <component :is="comName"></component>

      

      <!-- <Left></Left> -->
    </div>
  </div>
</template>

<script>
// 导入left组件

import Left from "@/components/Left.vue"

// 导入Right组件

import Right from "@/components/Right.vue"
export default {

  // 使用data存储要展示的组件名称

  data(){
    return {
      comName:'left'  
    }
  },

  components:{
    Left,
    Right
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
  • 效果图

1.3 keep-alive 保持状态

  • 一个内置的标签（）

  • 在其文本区域放置要保持状态的组件

  • 结果

  • 组件在切换时，不在被销毁，而是被缓存，不在被创建，而是被激活

1.3.2 keep-alive状态下的生命周期

  • 组件被缓存时，触发deactivated生命周期函数
  • 组件被激活时，触发activated生命周期函数

示例

  • left组件
<template>
  <div class="left-container">
    <h3>Left 组件----------{{count}}</h3>
    <button @click="count+=1">+1</button>
  </div>
</template>

<script>
export default {

  data(){
    return {
      count:0
    }
  },

  created(){
    console.log('left组件被创建');
  },

  destroyed(){
    console.log('left组件被销毁');
  },

  // 在keep-alive状态下的生命周期

  deactivated(){
    console.log('left组件被缓存');
    
  },

  activated () {
    console.log('left组件被激活');
  }
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
  • app根组件
<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <!-- 实现按需切换组件 -->

      <button @click="comName='left'">展示left组件</button>
      <button @click="comName='Right'">展示Right组件</button>

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->

      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->


      <!-- keep-alive标签保持组件的状态 -->
      <keep-alive>

          <component :is="comName"></component>
      </keep-alive>
      

      

      <!-- <Left></Left> -->
    </div>
  </div>
</template>

<script>
// 导入left组件

import Left from "@/components/Left.vue"

// 导入Right组件

import Right from "@/components/Right.vue"
export default {

  // 使用data存储要展示的组件名称

  data(){
    return {
      comName:'left'  
    }
  },

  components:{
    Left,
    Right
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
  • 效果图

1.4 keep-alive的include和exclude属性

  • include属性：决定哪些组件被缓存
  • exclude属性：决定哪些组件不被缓存
  • include和exclude不可同时使用
  • keep-alive默认缓存所有的组件

示例

  • 只缓存Left组件
<keep-alive include="Left">

          <component :is="comName"></component>
      </keep-alive>

1.5 声明组件时为组件起名称

  • export default 中的name属性
  • Right组件起名称
<template>
  <div class="right-container">
    <h3>Right 组件</h3>
  </div>
</template>

<script>
export default {

  // 为组件起自己的名称

  name:'MyRight'
}
</script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>
  • 效果图

注意点

  • 注册名称用于标签使用组件
  • 声明的名称不管调试，还是keep-alive的exlude，include属性都用这个

2. 插槽

  • 定义

插槽（Slot）：vue组件中的占位符：把不确定的，希望由用户指定的部分

  • 图解

2.1 插槽的使用

  • <slot></slot>插槽占位符的使用

  • left组件使用插槽占位符

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <!-- 定义插槽占位符 -->

    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
  • app使用left组件，在插槽位置自定义内容
<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->

      <!-- Left插槽 -->

      <Left>
          <!-- 插槽位置自定义内容 -->

          <p>用户自定义</p>
      </Left>
    </div>
  </div>
</template>

<script>
// 导入Left组件
import Left from '@/components/Left.vue'
export default {

  components:{
    Left,
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
  • 效果图

2.2 具名插槽

  • vue官方规定，每个插槽都有一个name属性，如果不指定，默认name的值为default

  • 默认情况下，使用组件时，组件的内容部分默认渲染到name属性值为default的插槽处

2.3 将内容渲染到指定插槽

示例：填充到default插槽

  • app要填充的内容
<Left>
          <!-- 插槽位置自定义内容 -->
          <!-- 将内容填充到指定的插槽，使用v-slot指令 -->
          <template v-slot:default>
              <p>用户自定义</p>
          </template>
          
      </Left>
  • left组件的插槽部分
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <!-- 定义插槽占位符 -->

    <slot name="default"></slot>
  </div>
</template>

注意点

  • v-slot指令需要添加到<template>标签上

标签：vue,color,组件,20px,left,cnblog,Left
From： https://www.cnblogs.com/lingxin1123/p/17091140.html

相关文章

  • es6模块化-cnblog
    es6模块化1.设置es6的模板规范package.json中配置node.js默认支持commonjs规范修改为es6规范"type":"module",2.解构赋值来按需导入2.1按需导出和默认导出......
  • vue（八）头条项目-cnblog
    vue（八）头条项目1.项目结构根据vuecreatemy-toutiao创建项目勾选上router2.生成的项目中的view文件夹和compoent文件夹都是用于存放组件view中的组件是通过路由......
  • Vue（六）-cnblog
    Vue（六）1.前端路由hash值与组件之间的对应关系hash值代表url地址中#号后面的内容，不同的hash地址对应不同的组件图解1.2简易路由<template><divclass="ap......
  • vue3
    Vue3的特性1.新的构建工具vite1.2基本使用vite基本使用：创建项目npminitvite-app项目名称或者yarncreatevite-app项目名称安装依赖npmi或者yarn启......
  • 1、配置vue项目支持es6语法-cnblog
    一些注意点1、配置vue项目支持es6语法在package.json文件中新增type节点package.json{"type":"module",}2.Vuex的挂载Vue.use方法调用了一个install的......
  • vue3 与vue2的区别-cnblog
    vue3与vue2的区别1.template节点vue2只允许一个根节点vue3允许多个根节点2.创建工具vue3：使用vite，也可使用vue-clivue2：使用vue-clivite创建3.调试工......
  • vue入门（二）-cnblog
    vue入门（二）1.过滤器一个函数在插值表达式中使用，对插值的值进行再处理{{username|toUpCase}}示例<!DOCTYPEhtml><htmllang="en"><head><metacharset......
  • vue入门（一）-cnblog
    vue入门（一）1.什么是vue一个框架（现有的解决方案）构造用户界面（操作html页面的内容）2.vue的特性数据驱动视图页面所依赖的数据发生变化时，vue会监听数据的变化，重新......
  • VUE学习笔记DAY01-cnblog
    webpack的使用（配合ppt）1.webpack前端工程化的具体解决方案作用代码压缩混淆处理浏览器端的JavaScript兼容性性能优化1.1基于webpack实现隔行变色npmij......
  • Vue（四）-cnblog
    Vue（四）1.生命周期一个组件从（创建->运行->销毁的整个阶段）生命周期函数：vue框架的内置函数，会随着组件的生命周期，自动按次序执行注意点生命周期强调整个时间段......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99