在组件入门这篇教程中，学院君已经给大家演示了插槽（slot）功能的基本使用，插槽的主要作用就是在组件中分发父作用域的内容，这个父作用域可以是 Vue 全局容器（可以看作是一个全局的「根组件」），也可以是父组件。
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue中使用特殊的 元素作为原始内容的插槽。
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue中使用特殊的 <slot> 元素作为原始内容的插槽。
插槽是组件中用来承载内容的一种机制，可以让组件在运行时接受来自其它组件的任意内容。可以将它理解为是在Vue组件中定义的占位符，用于指定在父组件中传递给子组件的内容的位置。它可以根据需要在父组件中动态地插入不同的内容，同时也可以接受子组件中传递下来的数据。 创建插槽 在vue的组件中，使用<slot>标签来定义插槽，我们先在components文件夹新建一个Product.vue组件，在Product组件中用<slot>插槽占位，代码如下
vue 在 2.6 版本中，对插槽使用 v-slot 新语法，取代了旧语法的 slot 和 slot-scope，并且之后的 Vue 3.0 也会使用新语法，这并不是仅写法的不同，还包括了性能的提升
Vue 匿名、具名和作用域插槽的使用 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。匿名插槽 子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。<template> hello <slot>陌生人</slot> </template> 这里定义了一个默认插槽，只要
最近参与了一个Vue.js项目，项目中需要能够以编程方式创建组件。通过编程，意思是使用JavaScript创建和插入组件，而无需在模板中编写任何内容。
官方推荐使用写法1来定义全局注册组件命名，以避免可能出现的与HTML元素相冲突的情况。
Vue 代码中的 slot 是什么，简单来说就是插槽。<slot> 元素作为组件模板之中的内容分发插槽，传入内容后 <slot> 元素自身将被替换。
首先需要约定一下，使用JSX组件命名采用首字母大写的驼峰命名方式，样式可以少的可以直接基于vue-styled-components写在同一个文件中，复杂的建议放在单独的Styles.js文件中，当然也可以不采用CSS-IN-JS的方式，使用Less/Sass来写，然后在文件中import进来。
举个栗子比如京东商城移动app每个页面都有一个导航栏,虽然架构相似,但是每个部分功能都不同,其实这就是插槽,用了同一个组件,但是组件内部只是留了三个位置,没有指定具体内容,由父组件负责扩展和定制具体内容.
当我们创建这样一个Vue实例后,它就挂在到了一个id为app的dom对象上,我们就不再需要和HTML直接交互了,我们仅仅需要利用Vue实例操作即可
我们在注册组件的时候，我们都会给组件起一个名字，就好像我们人的名字一样。需要注意的是，我们的组件名字是有一些规范的，一般这种单文件组件，我们强烈推荐使用字母全小写且必须包含一个连字符，全部小写字母，单词使用中华线 - 隔开。
插槽允许我们在父组件引用子组件时，在组件其中放一段可以带标签的元素，甚至放入其他组件等
将一个页面拆分成一个个小的功能块，每个功能块完成自己独立的功能，这样在之后的页面维护和管理就会方便许多。
通过slotProps访问用户的数据，slotProps可以访问子组件中的v-bind提供的所有数据。
computed 有缓存，基于响应式依赖数据（基于data中声明过或者父组件传递的props中的数据）发生改变，才会重新进行计算
在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符
组件里定义的prop都是单向数据流，只能通过父级组件对齐进行修改，组件本身不能修改props的值，只能修改定义在data里的数据，非要修改，也是通过后面介绍的自定义事件通知父级，由父级来修改；
这是最基本的示例，如果我们不提供父级的任何slot 内容，则我们将<slot>放在其中的任何内容都会作为后备内容。
前面的笔记 —— 《Vue3 | 组件的定义及复用性、局部组件、全局组件、组件间传值及其校验、单项数据流、Non-props属性》，单向数据流的概念， 即子组件无法修改来自父组件的数据字段， 如果确要修改，可以使用下面说的方式进行通信： 首先，在子组件的UI点击回调方法中，调用this.$emit('【自定义事件名】')， 向外发送一个事件； 接着各级父组件会收到这个事件， 则在父组件中 调用 子组件标签处， 以 @【事件名】= "回调方法名"的形式，监听该事件以及配置回调方法； 回调方法中即可 对 子组件意图修改 的 父组件数据字段 进行修改；
类似微服务的软件架构，在前端开发中，一个页面的实现往往十分复杂，我们可以将一个页面划分为多个块，每个块负责相应的功能，块之间通过通信来交互。这样的前端开发方式正是组件化开发，一个页面是一个大的组件树，其下又划分有很多小的组件。这样一来，不仅降低了一次开发的难度，而且避免了重复造轮子，组件可以灵活的嵌入其他的Vue项目中进行使用。
最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。 真正有能力的插槽是什么？
上一章已经更新了Vue基础，那么本章将更新Vue中最重要的概念--组件，会介绍到组件的使用，组件传值，插槽的使用，插槽的分类。
在Vue的组件开发中，有些情况组件中的 html 内容是需要通过父组件判断之后，才能有确认的。没有理由对于父组件的判断编写多个存在一定重复代码的组件来进行切换吧！这时候就需要使用到插槽 slot 了。
组件是当作自定义元素使用的，元素可以有属性和内容，通过组件定义的prop接收属性值，可以解决属性问题，那么内容呢？这可以通过<slot>元素解决。此外，插槽(slot)也可以作为父子组件之间通信的另一种实现方式。 下面是一个简单的自定义组件。
上一篇章，我们讲解了Vue中插槽的基本使用方法，本篇章来讲解作用域查看的情况。这是一种什么情况呢？
每个vue的组件实例上，都包含一个 refs对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的 refs指向一个空对象。
在 Vue 中，插槽（Slot）是一个非常重要的概念，它允许我们在组件中定义一些可供父组件填充内容的区域。
父子组件传值可以通过 prosp + emit 来实现，虽然 props 可以传递各种类型，但是却不能传递组件（包括HTML），这样灵活度就差了一些。 那么怎么办呢？为了提高灵活性，Vue 提供了插槽功能。
父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。
之前说过，我们可以通过以下方式创建一个Vue实例 new Vue({ el: '#some-element', // 选项 })
在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 [XSS 攻击]。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值
在我讲 vue 3.0 的普通组件的内容里，我提到了具名插槽发生了变化，我当时不清楚新的如何使用。今天查看了一些资料，终于搞明白了。
合成（Composition）API 是 Vue 的新大版本中讨论最多的特色语法。这是一种全新的逻辑复用和代码组织方法。
比如现在要开发一个步进器组件，双向绑定一个数字变量。点击加号的时候绑定值加一，点击减号的时候绑定值减一；大概是长这个样子的：
前言 vue项目，组件应用非常广泛，感觉只要能被多个地方复用的代码，都可以写成组件，这样不用做重复的工作。github上面也有很多大牛制造了n个轮子，方便大家使用。之前也有总结过vue组件集合，没有了
Web Component 已经被浏览器广泛支持，不再是新鲜玩意了，它有很多使用场景，比如编写跨框架的组件库、微前端，完全用它开发复杂的应用也没问题。
对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。
最近一段时间挺忙，对 Vue 3.0 的更新记录看的比较少，今天看了一下 release 记录，发现最新的 2 个小版本对 script-setup 这个新特性改动还算蛮大的，之前的用法都调整了不少。
其中slot元素就是子组件的预备插槽（相当于插游戏卡得区域），而父组件里的"我是内容..."就相当于游戏卡了，如果没有slot元素那么内容区域就无法显示。
微信小程序入门门槛低、开发周期短、代码编写灵活、传播速度快等优点让微信小程序迅速火爆，开发者纷纷涌入，任何语言开发者一旦多了，就会有新的框架出来，WePY就是一个优秀的微信小程序开发框架。它让微信小程序的开发更加简单，功能更加强大，并且也优化了文件结构，熟悉了WePY之后确实可以让微信小程序开发更上一层楼。
如果你以前使用过React，那么你已经熟悉了组件相关的生命周期的概念。所谓的组件生命周期，就如同人一般从出生到消亡一样，有几个关键的阶段，在这几个关键的阶段，我们可以编写相应的代码进行一些逻辑的处理，比如在初始化组件时，我们通过Ajax的形式进行数据请求。
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
