组件进阶-

最新推荐文章于 2024-07-05 15:36:46 发布
最新推荐文章于 2024-07-05 15:36:46 发布
阅读量206 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73597602/article/details/126815151
版权

一、动态组件

<component> 是vue的内置组件，必须要有一个is属性 ，is的值要用data中的一个键作为值，可以实现动态切换组件

用法：

组件A

<template>
<div>
用户名:
<input type="text" name="" id="" />
密码:
<input type="password" name="" id="" />
个人信息:
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</template>

<script>
export default {}
</script>

<style scoped></style>

组件B

<template>
  <div>
    用户名:
    <input type="text" name="" id="" />
    密码:
    <input type="password" name="" id="" />
  </div>
</template>

<script>
export default {}
</script>

<style></style>

将组件AB引入组件C

<template>
  <div>
    <h1>动态组件</h1>
    <button @click="comName = 'UserName'">点击1</button>
    <button @click="comName = 'UserInfo'">点击2</button>
    <div>
      <keep-alive>
        <component :is="comName"></component>
    </div>
    wwaq
  </div>
</template>

<script>
import UserName from './UserName.vue'
import UserInfo from './UserInfo.vue'
export default {
  data() {
    return {
      comName: 'UserName',
    }
  },
  methods: {},
  components: { UserName, UserInfo },
}
</script>

<style></style>

将组件C放入app.vue内

<template>
  <div>
    <UserDyName></UserDyName>
  </div>
</template>

<script>
import UserDyName from './components/UserDyName.vue'
export default {
  components: { UserDyName },
}
</script>

<style></style>

二、组件缓存

<keep-alive>组件可用动态缓存组件内的信息，切换组件后不会消失

用法：用keep-alive将component包裹起来，不会触发vue的生命周期,如果没有keep-alive切换之后则会直接销毁component内的内容

<template>
  <div>
    <h1>动态组件</h1>
    <button @click="comName = 'UserName'">点击1</button>
    <button @click="comName = 'UserInfo'">点击2</button>
    <div>
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
    wwaq
  </div>
</template>

<script>
import UserName from './UserName.vue'
import UserInfo from './UserInfo.vue'
export default {
  data() {
    return {
      comName: 'UserName',
    }
  },
  methods: {},
  components: { UserName, UserInfo },
}
</script>

<style></style>

<keep-alive>组件的两个生命周期activated和deactivated

用法：

<template>
  <div>
    用户名:
    <input type="text" name="" id="" />
    密码:
    <input type="password" name="" id="" />
  </div>
</template>

<script>
export default {
  created() {
    console.log('Name被创建了')
  },
  beforeDestroy() {
    console.log('Name被销毁了')
  },
  activated() {
    console.log('Name被激活了')
  },
  deactivated() {
    console.log('Name失去激活')
  },
}
</script>

<style></style>

三、组件插槽

  1. 用法：

  2. 组件内用<slot></slot>占位

  3. 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

  4. 子组件引入：

  5. <template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
}
</script>

<style scoped>
h3 {
  text-align: center;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}

.title h4 {
  line-height: 2;
  margin: 0;
}

.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}

.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}

img {
  width: 50%;
}
</style>

    父组件引入：

  6. <template>
  <div>
    <!-- <UserDyName></UserDyName> -->
    <Pannel>
      <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </Pannel>
    <Pannel>
      <div>
        <img
          src="图片地址"
          alt=""
        />
      </div>
    </Pannel>
    <Pannel></Pannel>
  </div>
</template>

<script>
import UserDyName from './components/UserDyName.vue'
import Pannel from './components/Pannel.vue'
export default {
  components: { UserDyName, Pannel },
}
</script>

<style></style>

     

  7. 四、默认插槽内容

  8. slot可以设置默认显示的属性，直接在slot内写入即可

        <div class="container" v-show="isShow">
      <slot> 我是默认的 </slot>
    </div>

    五、自定义插槽

  9. 用v-slot：组件名  绑定自定义组件（v-slot简写为#）

  10. 子组件通过slot标签的name属性创建一个值，父组件通过templat标签的v-slot属性接收

  11. 子组件

  12. <template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <!-- <h4>芙蓉楼送辛渐</h4> -->
      <slot name="title">默认头部</slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <slot name="content"> 默认内容 </slot>
    </div>
  </div>
</template>

    父组件引用

  13. <template>
  <div>
    <!-- <UserDyName></UserDyName> -->
    <Pannel>
      <template #title>
        <h4>芙蓉楼送辛渐</h4>
      </template>
      <template #content>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </template>
    </Pannel>
    <Pannel>
      <template #title>
        <h4>蕾姆</h4>
      </template>
      <template #content>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7a6e7684c7b3fc8acf90bedc3cbd1ba8106e85ba.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665547487&t=3214fe93ca0737750c9f6b5c909b734b"
          alt=""
        />
      </template>
    </Pannel>
    <Pannel></Pannel>
  </div>
</template>

<script>
import UserDyName from './components/UserDyName.vue'
import Pannel from './components/Pannel.vue'
export default {
  components: { UserDyName, Pannel },
}
</script>

<style></style>

    六、作用域组件

  14. 子组件内通过:row属性将要穿出的对象写入:row="defaultObj"，父组件 v-slot="scope"属性接收子组件穿出的对象，再将值写入到标签内 {{ scope.row.defaultOne }}

  15. 子组件

    <template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <!-- <h4>芙蓉楼送辛渐</h4> -->
      <slot name="title">默认头部</slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <slot name="content"> 默认内容 </slot>
      <slot :row="defaultObj"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      defaultObj: {
        defaultOne: '无名氏',
        defaultTwo: '小传同学',
      },
    }
  },
}
</script>

<style scoped>
h3 {
  text-align: center;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}

.title h4 {
  line-height: 2;
  margin: 0;
}

.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}

.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}

img {
  width: 50%;
}
</style>

    父组件

  16. <template>
  <div>
    <!-- <UserDyName></UserDyName> -->
    <Pannel>
      <template #title>
        <h4>芙蓉楼送辛渐</h4>
      </template>
      <template #content>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </template>
    </Pannel>
    <Pannel>
      <template #title>
        <h4>蕾姆</h4>
      </template>
      <template #content>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7a6e7684c7b3fc8acf90bedc3cbd1ba8106e85ba.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665547487&t=3214fe93ca0737750c9f6b5c909b734b"
          alt=""
        />
      </template>
    </Pannel>
    <Pannel>
      <template v-slot="scope">
        <h1>
          {{ scope.row.defaultOne }}
        </h1>
        <h1>
          {{ scope.row.defaultTwo }}
        </h1>
      </template>
    </Pannel>
  </div>
</template>

<script>
import UserDyName from './components/UserDyName.vue'
import Pannel from './components/Pannel.vue'
export default {
  components: { UserDyName, Pannel },
}
</script>

<style></style>

Wavli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Android高级进阶--免解压密码
01-03
《Android高级进阶--免解压密码》是一本专为Android开发者设计的进阶指南，旨在帮助读者深入理解Android系统的内部工作原理，并掌握无需解压密码的文件处理技术。本书内容丰富，涵盖了Android开发中的诸多关键知识点...
vue-基础-进阶-111
02-01
"vue-基础-进阶-111"这个标题暗示我们将深入探讨Vue的基础概念以及一些进阶技巧。在这个主题中，我们将涵盖以下几个关键知识点： 1. **Vue实例**：Vue的核心是Vue实例，它是Vue应用程序的起点。通过创建一个新的Vue...
vue 动态组件【详解】component :is
热门推荐
朝阳39的博客
12-31 4万+
vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为： <component :is="componentTag"></component> data() { return { componentTag: '', } }, componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。 完整范例代码 <template>
Vue动态组件 component :is的使用
qq_44342031的博客
01-10 1万+
Vue动态组件 component :is的使用
Vue3中使用component :is 加载组件
fury的博客
02-08 6314
【代码】Vue3中使用component :is 加载组件。
Vue3 动态组件 component:is= 失效
weixin_63681863的博客
09-25 4356
用Vue3，组件无需注册，所以就会提示“注册了不不使用”的报错，于是用了异步注册，甚至直接为了不报错就在下面使用3个组件，有异步加载，但还是实现不了预期效果组件已经有了，但是component宽高为0就上面这个代码，除了没用2个script剩下的没啥大差别了，就不知道为啥上面的不行，可能是预编译啥的吧，求大佬指点。
前端进阶 - 随笔.rar
12-10
这些框架的组件化开发、状态管理、生命周期方法等可能会在笔记中进行详细阐述。还有，了解并应用ES6及以上的语法特性，如箭头函数、解构赋值、类和模块，可以显著提高代码的可读性和简洁性。 前端性能优化也是不容...
Java进阶-JDBC（八）.zip
06-13
本资料包"Java进阶-JDBC（八）"可能包含了一系列关于JDBC深入理解和实践的教程，特别是针对MySQL数据库的使用。 在JDBC中，主要涉及以下几个核心概念： 1. **Driver Manager**：Java中的`java.sql.DriverManager`...
Android高级进阶-高清-带目录
08-08
《Android高级进阶》是一本面向已有基础的Android开发者，旨在提升其技能和理解的书籍。这本书涵盖了Android开发中的高级主题和技术，对于那些希望在Android领域深入挖掘的工程师来说，是一份不可多得的资源。高清...
vue3动态组件,涉及了＜component :is=“...“＞的使用
fury的博客
06-28 1358
【代码】vue3动态组件,涉及了＜component :is=“...“＞的使用。
＜component :is=“ “/＞动态组件在 el-tab-pane里的应用
长歌的博客
07-14 2916
element UI 组件-Tabs 标签页-动态生成标签页面嵌套组件
使用＜component :is=““＞＜/component＞一个页面，多个相似组件使用方法
weixin_44281416的博客
11-16 1353
<component :is="`zuJian${type}`" :settings="settings"> </componen> import Zujian1 from './components/zujian1' import Zujian2 from './components/zujian2' props:['settings'] components:{ zujian1, zujian2 }
:is是什么用法？
m0_57236802的博客
05-29 703
是一个数据属性，它的值应该是一个已注册的组件的名称。这个名称可以是一个全局注册的组件的字符串名称，也可以是一个局部注册的组件的对象。指令是一个非常有用的工具，因为它允许你根据应用的状态或者用户的交互动态地更改界面的组成部分。标签是一个 Vue 的内置组件，它的作用是在运行时动态地渲染一个组件，而这个组件是由。是一个特殊的 Vue 指令，用于动态地绑定一个组件的类型。指令绑定的值，你可以在运行时切换不同的组件。这种技术被称为动态组件。标签会自动地切换到相应的组件。例如，如果你有两个组件。
Vue动态组件 component标签 keep-alive标签
烎烎的博客
01-13 6318
多读书还是有好处，前段时间，用vue做了一个动态切换tab的项目，如果初学者的做法就是用路由进行跳转，但是今天闲来没事看教程和书发现还有一种做法，就是用component的is,即多个组件可以使用同一个挂载点，根据条件来切换不同的组件。 component标签中的is属性决定了当前采用子组件，is-bind的缩写：":is" 绑定父组件中data的其中一个属性，具体代码如下 &...
＜component :is=“...“＞和＜slot＞用法，动态组件
qq_36434345的博客
10-09 691
slot && component
【vue动态组件】VUE使用component :is 实现在多个组件间来回切换
最新发布
m0_59157023的博客
07-05 358
VUE使用component :is 实现在多个组件间来回切换。component :is 动态父子组件传值。
Vue 3.0 内置组件
2201_75866484的博客
04-02 1277
请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值