首页 > 其他分享 >前端宝典二十五：vue2高阶用法mixin、transition、slot

前端宝典二十五：vue2高阶用法mixin、transition、slot

时间：2024-09-02 22:23:52浏览次数：12  
标签：slot 混入 console 对象 插槽 transition mixin 组件 属性

本文主要探讨vue2中几个高阶的用法：mixin、transition、slot

一、mixin

在 Vue 中，mixin（混入）是一种用于在多个组件之间共享代码的机制。它允许你定义可重用的选项对象，并将其混入到不同的组件中。

1、使用方法

  1. 创建一个混入对象：

    const myMixin = {
  data() {
    return {
      sharedData: '这是混入中的共享数据',
    };
  },
  methods: {
    sharedMethod() {
      console.log('这是混入中的共享方法');
    },
  },
};

  2. 在组件中使用混入：

    <template>
  <div>
    <p>{{ sharedData }}</p>
    <button @click="sharedMethod">调用混入方法</button>
  </div>
</template>

<script>
import { myMixin } from './path/to/mixin';

export default {
  mixins: [myMixin],
};
</script>

在这个例子中，组件将混入对象中的data和methods选项混入到自身中，从而可以访问sharedData和sharedMethod。

2、mixin中使用计算属性

在 Vue 的混入（mixin）中可以使用计算属性，方式与在组件中类似。以下是一个示例：

创建混入对象：

const myMixin = {
  data() {
    return {
      num1: 10,
      num2: 20,
    };
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    },
  },
};

在组件中使用混入：

<template>
  <div>
    <p>数字 1：{{ num1 }}</p>
    <p>数字 2：{{ num2 }}</p>
    <p>两数之和：{{ sum }}</p>
  </div>
</template>

<script>
import { myMixin } from './path/to/mixin';

export default {
  mixins: [myMixin],
};
</script>

在这个例子中，混入对象myMixin定义了两个数据属性num1和num2，以及一个计算属性sum用于计算它们的和。在组件中混入这个对象后，可以直接访问这些属性和计算属性。

需要注意的是，如果组件自身也定义了与混入中同名的计算属性，那么组件中的计算属性会覆盖混入中的计算属性，就像数据属性和方法可能会发生的命名冲突一样。为了避免冲突，可以使用更具描述性的命名或者在必要时进行适当的调整。

3、如何实现多个混入

在 Vue 中可以很方便地实现使用多个混入（mixin）。以下是具体步骤：

一、创建多个混入对象

  1. 第一个混入对象 mixin1：
const mixin1 = {
  data() {
    return {
      dataFromMixin1: '这是混入 1 的数据',
    };
  },
  methods: {
    methodFromMixin1() {
      console.log('这是混入 1 的方法');
    },
  },
};
  1. 第二个混入对象 mixin2：
const mixin2 = {
  computed: {
    computedFromMixin2() {
      return '这是混入 2 的计算属性结果';
    },
  },
  created() {
    console.log('混入 2 被创建');
  },
};

二、在组件中使用多个混入

<template>
  <div>
    <p>{{ dataFromMixin1 }}</p>
    <p>{{ computedFromMixin2 }}</p>
    <button @click="methodFromMixin1">调用混入 1 的方法</button>
  </div>
</template>

<script>
import { mixin1, mixin2 } from './path/to/mixins';

export default {
  mixins: [mixin1, mixin2],
};
</script>

在这个例子中，组件同时混入了 mixin1 和 mixin2，可以访问两个混入对象中的数据、方法和计算属性等。

如果多个混入对象中存在同名的选项，遵循以下规则：

  • 数据属性：组件中的数据属性会覆盖混入对象中的同名数据属性。
  • 方法：组件中的方法会覆盖混入对象中的同名方法。
  • 计算属性：组件中的计算属性会覆盖混入对象中的同名计算属性。

总之一句话，为了数据安全可维护，组件的数据属性、方法、计算属性会覆盖mixin的同名的

为了避免命名冲突，可以使用更具描述性的命名或者在必要时进行适当的调整。同时，多个混入的使用应该谨慎，以确保代码的可维护性和可读性。

4、可能遇到的问题

  1. 命名冲突：如果混入对象和组件自身定义了相同的选项，可能会导致命名冲突。在这种情况下，组件中的选项将覆盖混入对象中的选项。为了避免命名冲突，可以使用不同的命名约定或者在混入对象中使用更具描述性的名称。

    const myMixin = {
  data() {
    return {
      mixinData: '这是混入中的数据',
    };
  },
  methods: {
    mixinMethod() {
      console.log('这是混入中的方法');
    },
  },
};

const myComponent = {
  data() {
    return {
      componentData: '这是组件中的数据',
      // 与混入中的 mixinData 冲突，组件中的选项将覆盖混入中的选项
      mixinData: '覆盖后的混入数据',
    };
  },
  methods: {
    componentMethod() {
      console.log('这是组件中的方法');
    },
    // 与混入中的 mixinMethod 冲突，组件中的选项将覆盖混入中的选项
    mixinMethod() {
      console.log('覆盖后的混入方法');
    },
  },
  mixins: [myMixin],
};

  2. 可维护性问题：当使用多个混入对象时，可能会导致代码的可维护性降低。因为很难确定一个特定的选项来自哪个混入对象，尤其是当混入对象之间存在复杂的依赖关系时。为了提高可维护性，可以尽量减少混入对象的数量，或者使用更清晰的命名约定和文档说明。

    const mixin1 = {
  data() {
    return {
      dataFromMixin1: '这是混入 1 中的数据',
    };
  },
  methods: {
    methodFromMixin1() {
      console.log('这是混入 1 中的方法');
    },
  },
};

const mixin2 = {
  data() {
    return {
      dataFromMixin2: '这是混入 2 中的数据',
    };
  },
  methods: {
    methodFromMixin2() {
      console.log('这是混入 2 中的方法');
    },
  },
};

const myComponent = {
  data() {
    return {
      componentData: '这是组件中的数据',
    };
  },
  methods: {
    componentMethod() {
      console.log('这是组件中的方法');
    },
  },
  mixins: [mixin1, mixin2],
};

  3. 调试困难：由于混入对象中的代码与组件自身的代码混合在一起，可能会导致调试困难。当出现问题时，很难确定问题是来自组件还是混入对象。为了便于调试，可以在混入对象中添加适当的日志和错误处理代码，以便更好地跟踪问题的来源。

    const myMixin = {
  created() {
    console.log('混入对象被创建');
    try {
      // 可能会引发错误的代码
      const result = someFunctionThatMightThrowError();
      console.log(result);
    } catch (error) {
      console.error('混入对象中出现错误：', error);
    }
  },
};

const myComponent = {
  created() {
    console.log('组件被创建');
  },
  mixins: [myMixin],
};

总之，在使用 Vue 的混入机制时，需要注意命名冲突、可维护性和调试困难等问题。合理地使用混入对象可以提高代码的可重用性，但也要谨慎使用，以确保代码的清晰和可维护性。

二、transition

在 Vue 中，<transition> 是一个非常有用的特性，它可以为元素的插入、更新和移除添加过渡效果。

1、基本用法

1. 简单过渡：

 <transition name="fade">
   <div v-if="show">Hello World!</div>
 </transition>

  .fade-enter-active,
  .fade-leave-active {
     transition: opacity 0.5s;
   }
  .fade-enter,
  .fade-leave-to {
     opacity: 0;
   }

当 show 状态改变时，<div> 元素会有淡入淡出的效果。

---------------------------------------------------------------------------->

1、通过transition的name属性，定义过渡动画的class规范
2、使用class类来控制动画
3、首先组件即将出现，vue将其添加到dom中，然后绑定对应的class，实现进场过渡效果
4、元素退场执行完成会transitionend，vue将其从dom中删除remove

2. 多个元素过渡：

 <transition name="fade">
      <div v-if="show" key="1">A</div>
      <div v-else key="2">B</div>
 </transition>

.slide-enter-active,
.slide-leave-active {
   transition: transform 0.5s;
 }
.slide-enter,
.slide-leave-to {
   transform: translateX(100px);
 }

根据 showA 和 showB 的状态切换两个元素，有滑动效果，但是要注意这种过个元素过渡动画需要有key。

2、过渡模式

1. in-out 模式

新元素先进行过渡进入，旧元素过渡离开。

<transition name="fade" mode="in-out">
      <p v-if="show" key="1">transition hello1 effect</p>
      <p v-else key="2">transition hello2 effect</p>
</transition>

2. out-in 模式

旧元素先过渡离开，新元素再过渡进入。

<transition name="fade" mode="out-in">
      <p v-if="show" key="1">transition hello1 effect</p>
      <p v-else key="2">transition hello2 effect</p>
</transition>

3、结合列表过渡

1. 列表过渡：

 <transition-group name="list">
   <div v-for="item in items" :key="item.id">{{ item.text }}</div>
 </transition-group>

  .list-enter-active,
  .list-leave-active {
     transition: all 0.5s;
   }
  .list-enter,
  .list-leave-to {
     opacity: 0;
     transform: translateY(20px);
   }

2. 状态过渡

可以为列表的添加、删除和移动添加过渡效果。

  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id" :data-index="item.id">
      {{ item.text }}
    </li>
  </transition-group>

 new Vue({
   data: {
     items: [
       { id: 1, text: 'Item 1' },
       { id: 2, text: 'Item 2' },
       { id: 3, text: 'Item 3' },
     ],
   },
   methods: {
     addItem() {
       this.items.push({ id: 4, text: 'New Item' });
     },
     removeItem() {
       this.items.pop();
     },
   },
 });

  .list-move {
     transition: transform 0.5s;
   }

4、自定义过渡类名

可以使用 enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class 和 leave-to-class 属性来自定义过渡类名。

<transition
  enter-class="custom-enter"
  enter-active-class="custom-enter-active"
  enter-to-class="custom-enter-to"
  leave-class="custom-leave"
  leave-active-class="custom-leave-active"
  leave-to-class="custom-leave-to"
>
  <div v-if="show">Hello World!</div>
</transition>

5、结合动态过渡

根据不同条件使用不同的过渡效果。

<transition :name="transitionName">
  <div v-if="show">Hello World!</div>
</transition>

new Vue({
  data: {
    show: true,
    transitionName: 'fade',
  },
  methods: {
    changeTransition() {
      this.transitionName = 'slide';
    },
  },
});

通过 <transition> 和 <transition-group> 可以为 Vue 应用添加丰富的过渡效果，提升用户体验。

三、slot

在 Vue 中，slot（插槽）是一种用于在组件中传递内容和实现组件内容分发的机制。它允许父组件向子组件传递内容，子组件可以在特定的位置显示这些内容。

1、插槽的类型

  1. 默认插槽：当没有指定具名插槽时使用的插槽。父组件传递的内容将在子组件的默认插槽位置显示。
  2. 具名插槽：通过给插槽指定一个名称，父组件可以传递不同的内容到不同的具名插槽，子组件可以根据插槽名称来显示相应的内容。
  3. 作用域插槽：允许子组件向父组件传递数据，并在父组件中使用这些数据来渲染内容。作用域插槽可以在父组件中访问子组件的数据，从而实现更灵活的内容分发。

2、实例

  1. 默认插槽示例：

子组件（ChildComponent.vue）：

<template>
    <div class="hello">
      <h2>Child Slot Demo</h2>
      <slot>默认文本显示</slot>      
    </div>
</template>

父组件（App.vue）：

 <template>
    <div class="hello">
      <h1>SLOT DEMO</h1>
      <SlotChild>父组件传递的值</SlotChild>      
    </div>
</template>

页面显示如下：
---------------------------------------------------------------------------->

在这里插入图片描述

---------------------------------------------------------------------------->

  1. 具名插槽示例：

子组件（SlotChild.vue）：

<template>
    <div>
      <h2>具名插槽子组件</h2>
      <header>
        <slot name="header">默认头部内容</slot>
      </header>
      <main>
        <slot>默认主体内容</slot>
      </main>
      <footer>
        <slot name="footer">默认底部内容</slot>
      </footer>
    </div>
  </template>

父组件（App.vue）：

<template>
    <SlotChild>
        <template v-slot:header>
            <h3>自定义头部</h3>
        </template>
        <p>自定义主体内容</p>
        <template v-slot:footer>
            <p>自定义底部内容</p>
        </template>
    </SlotChild>
</template>

页面显示如下：
---------------------------------------------------------------------------->

在这里插入图片描述
---------------------------------------------------------------------------->

3. 作用域插槽示例：

子组件（ScopedSlotComponent.vue）：

<template>
    <div>
      <ul>
        <li v-for="item in items" :key="item.id">
          <slot :item="item">{{ item.text }}123123</slot>
        </li>
      </ul>
    </div>
  </template>

父组件（App.vue）：

<template>
    <div>
        <SlotChild>
        <template v-slot="{ item }">
            <span>{{ item.id }} - {{ item.text }}</span>
        </template>
        </SlotChild>
    </div>
</template>

页面显示如下：
---------------------------------------------------------------------------->
在这里插入图片描述
---------------------------------------------------------------------------->

通过使用插槽，Vue 允许你创建更加灵活和可复用的组件，使组件之间的内容分发更加方便和高效。

标签：slot,混入,console,对象,插槽,transition,mixin,组件,属性
From： https://blog.csdn.net/franktaoge/article/details/141821655

相关文章

  • PoLLMgraph: Unraveling Hallucinations in Large Language Models via State Transit
    本文是LLM系列文章，针对《PoLLMgraph:UnravelingHallucinationsinLargeLanguageModelsviaStateTransitionDynamics》的翻译。PoLLMgraph：通过状态转换动力学揭示大型语言模型中的幻觉摘要1引言2相关工作3PoLLMgraph4实验5结论局限性摘要尽管近......
  • 第四节：ASS混合指令 (Mixin Directives)
    SASS混合指令(MixinDirectives)​混合指令（Mixin）用于定义可重复使用的样式。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。定义与使用混合指令@mixin@mixinmixin-name(){/*css声明*/}例1：标准形式定义......
  • [SCSS] Media breakpoint util mixin
    $breakpoints:('phone':(320px,480px),'pad':(481px,768px),'notebook':(769px,1024px),'desktop':(1025px,1200px),'tv':1201px,)@mixinrespond-to($breakname){$bp:map-g......
  • @Transitional注解失效场景
     @Transitional注解用于完成声明式事务操作，默认当发生RuntimeException时会对当前事务操作进行回滚，但其使用不当就会造成失效；场景一：抛出异常非RuntimeException@Transitionalpublicvoidinsert()throwsException{//insert...thrownewException();}解决......
  • [CSS] View Transition
    /*ViewTransitions*//*STEP1*/::view-transition-old(root),::view-transition-new(root){animation-duration:1s;}/*STEP2*/@keyframesfade-in{from{opacity:0;}}@keyframesfade-out{to{opacity:0;}}@ke......
  • 034.Vue3入门，插槽Slot中同时显示主页面和插槽页面的内容
    1、App.vue代码：<template><div><h3>主页面</h3><Slot001v-slot="slotProps"><h4>{{msg}}==={{slotProps.msg}}</h4></Slot001></div></template><script>i......
  • 035.Vue3入门，使用具名插槽Slot中，同时显示主页面和多个插槽页面内容
    1、App.vue代码如下：<template><div><h3>主页面</h3><Slot001><template#s1="slotProps"><h4>{{msg}}==={{slotProps.msg1}}</h4></template><template#s2......
  • 033.Vue3入门，多个插槽Slot的命名调用和#号简写
    1、App.vue代码如下：<template><div><h3>插槽学习</h3><Slot001><!--插槽1--><templatev-slot:s2><p>{{msg1}}</p></template><!--插槽2--><......
  • 032.Vue3入门，插槽Slot的作用域和默认内容
    1、App.vue代码如下：<template><div><h3>插槽学习</h3><!--插槽1--><Slot001><p>{{msg}}</p></Slot001><!--插槽2--><Slot001><!--<p>{{m......
  • 洛谷P1208 [USACO1.3] 混合牛奶 Mixing Milk
    P1208[USACO1.3]混合牛奶MixingMilk题目描述由于乳制品产业利润很低，所以降低原材料（牛奶）价格就变得十分重要。帮助Marry乳业找到最优的牛奶采购方案。Marry乳业从一些奶农手中采购牛奶，并且每一位奶农为乳制品加工企业提供的价格可能相同。此外，就像每头奶牛每天只能挤出固......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99