• Vue扩展组件mixins，extends，composition api，slots

    q：vue中如何扩展一个组件？
    逻辑扩展有：mixins、extends、composition api；
    内容扩展有slots；

    1. 混入mixins是分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
    2. extends只能继承与一个组件。跟混入的不同是它只能扩展单个对象。另外如果和混入发生冲突，该选项优先级较高，优先起作用。
    3. 插槽主要用于vue组件中的内容分发，也可以用于组件扩展。如果要精确分发到不同位置可以使用具名插槽，如果要使用子组件中的数据可以使用作用域插槽。
    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Extends 扩展选项title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
head>
<body>
<h1>Vue Extends 扩展选项h1>
<hr>
<div id="app">
  <p>
    {{num}}
  p>
  <p><button @click="add">addbutton>p>
div>
body>
html>
<script>
  // mixxin
  const mymixin1 = {
    created() {
      console.log('我是mixin1中的created')
    },
    methods:{
     //如果方法名一样 他只触发构造器里的方法 扩展不触发 混入选项也一样
     add:function(){
       this.num++
       console.log('我是mixin1中的方法add')
     }
   }
  }
  const mymixin2 = {
    created() {
      console.log('我是mixin2中的created')
    }
  }
  // extends
  var extendObj={
   updated:function () {
     console.log('我是扩展的Update')
   },
   mounted() {
    console.log('我是扩展的mounted')
   },
   methods:{
     //如果方法名一样 他只触发构造器里的方法 扩展不触发 混入选项也一样
     add:function(){
       this.num++
       console.log('我是扩展出来的方法add')
     }
   }
  };
  var app = new Vue({
    el:'#app',
    data:{
      num:1
    },
    created() {
      console.log('我是构造器中的created')
    },
    mounted() {
      console.log('我是构造器mounted')
    },
    updated:function(){
      console.log('我是构造器触发的updated')
    },
    methods:{
      add:function(){
        this.num++
        console.log('我是原生的方法add')
      }
    },
    //扩展不能为数组 混入是为数组,所以扩展只能一个
    extends:extendObj,
    mixins: [mymixin1, mymixin2]
  })
script>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    混入的数据和方法不能明确判断来源且可能和当前组件内变量产生命名冲突，vue3中引入的composition api，可以很好解决这些问题，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据，然后在setup选项中组合使用，增强代码的可读性和维护性。例如：

    // 复用逻辑1
function useXX() {}
// 复用逻辑2
function useYY() {}
// 逻辑组合
const Comp = {
   setup() {
      const {xx} = useXX()
      const {yy} = useYY()
      return {xx, yy}
   }
}




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    声明

    • 本文属于读书笔记一类，是作者在 《开课吧全栈架构师第16期》 vue复习章课程学习途中，以视频中内容为蓝本，辅以个人微末的道行“填写”完成，推荐购买原课程观看，定有收获。
    • 欢迎大佬斧正。
    • 日更
  • 相关阅读:
    keepalived高可用学习 keepalived+nginx高可用负载均衡配置
    聊一聊Redis官方置顶推荐的Java客户端Redisson
    Python数据容器——列表、元组、字符串、集合、字典
    salesforce-Visualforce-7.自定义控制器(Custom Controllers)
    如何检查Windows 11笔记本电脑电池健康状况
    提取设备中所有APP的唯一标识符，判断每个APP的测试优先级，而后再进行测试安排
    Zabbix技术分享——docker组件编译使用教程
    国内免费版ChatGPT
    贪心 Leetcode 53 最大子数组和
    面向对象技术浅析
  • 原文地址：https://blog.csdn.net/qq_45934504/article/details/126890879