vue组件三个核心概念的详细说明

前言

本文主要介绍了vue的三个基本概念：属性、事件和槽，以及它们的用法和一些容易被忽略的重要细节。如果你读了别人写的组件，也可以从这三部分展开，可以帮助你快速理解一个组件的所有功能。

请用这篇文章的代码戳一下github博客，纸上谈兵会比较浅薄，大家要多敲敲代码！

一.属性

1.自定义属性道具

Prop定义了这个组件的可配置属性，它也决定了组件的核心功能。编写通用组件时，道具最好以对象的形式编写，这样可以为每个属性设置类型、默认值或自定义检查属性值，这在组件开发中非常重要。但是很多人忽略了直接使用道具的数组用法，这样的组件往往不精确。

//父组件道具名称=' attribute' :类型=' type ' : is-visible=' false ' : on-change=' handlepropchange ' : list=[22，33，44]title=' attribute demo ' class=' test1 ' : class='[' test2 ']' : style=' { margin top : ' 20px ' } '//注意3333:的优先级如果“警告”和“危险”中的一个传入这三个值以外的值，将引发警告：Validator :(值)={return [“成功”、“警告”、“危险”]。包括(值)}}。OnChange: {//对于接收到的数据，可以是各种数据类型，也可以传递函数type:函数，default: ()={}，isvisible 3360 {type: boolean，Default3360 false}，list: {type:array，//对象或数组的默认值必须从工厂函数中获取。default: ()=[]}}从上面的例子可以得出结论，道具可以显示和定义一个或多个数据。对于接收到的数据，它可以是各种数据类型或传递函数。

2 .继承

这是2.4.0中新增的一个API。默认情况下，未被识别为道具的父范围的属性绑定将被“回滚”，并作为普通的HTML属性应用于子组件的根元素。通过将inheritAttrs设置为false，这些默认行为将被删除。注意：此选项不影响类和样式绑定。

在上例中，如果title属性没有在子组件的props中声明，默认情况下它会挂在子组件的根元素上，如下图所示：

3.数据和道具的区别

类似

两个选项中都可以存储各种类型的数据。当行为操作改变时，行为操作使用的、模板渲染的所有数据都会同步改变。

差异

数据被称为动态数据。在每种情况下，我们都可以随意改变它的数据类型和数据结构，不会受到任何环境的影响。

道具叫静态数据。在它们各自的实例中，一旦在初始化中定义了类型，由于Vue是单向数据流，在数据传输过程中不能改变其数据类型，不允许直接操作子组件中传输的道具数据，但需要通过其他方式改变传输源中的数据。至于怎么改，我们就详细介绍一下：

4.单向数据流

这个概念出现在组件通信中。道具数据通过父组件或更高级别的组件数据或文字量传输。不允许直接更改各自实例中的道具数据，需要通过其他方式更改传输源中的数据。那么，如果我们有时想修改传递的道具，有哪些方法呢？

方法1:转换到数据选项

在子组件的数据中复制一个道具，可以修改数据

导出默认值{ props: { type:string }，data(){ return { CurrentType 3360 this。type}}通过数据选项中的currenttype接收props中的类型数据。相当于对currentType=type进行赋值操作，既获取currentType的数据，又改变currentType的数据。

方法2:使用计算属性

导出默认值{ props: { type: String }，computed : { normalized type : function(){ return this . type . touppercase()；}}}虽然以上两种方法可以在子组件中间接修改道具的值，但是如果子组件想要修改数据并同步更新到父组件中，那就没有用了。在某些情况下，我们可能需要双向绑定一个道具。此时，我们推荐以下两种方法：

方法三：使用。同步

//父组件模板div class=' hello' div pParent组件消息：{{msg}}/p pParent组件数组：{ { arr } }/p/div button @ click=' show=true '打开模型框/按钮br/Demo : show . sync=' show ' : msg . sync=' msg ' : arr=' arr '/Demo/div/templatescript import Demo from '。/demo . vue '；导出默认值{name :' hello '，components : {demo}，data () {return {show : false，msg : '模拟一个模型框'，arr: [1，2，3]}；}};/script/$ emit ('update3360 show '，false)；} }};

父组件将msg和show值传递给子组件道具，两者都使用。双向绑定的同步修饰符。

然而。sync是好的，但它也有局限性，例如：

1)不能与表达式一起使用(例如v-bind : title . sync=' doc . title '！无效)；

2)不能在文字对象上使用(例如，v-bind . sync=' { title : doc . title } '不能正常工作)。

方法4:将父组件中的数据包装为对象，并将其传递给子组件

这是因为对象和数组在JavaScript中是通过引用传入的，所以对于数组或对象类型道具，在子组件中更改对象或数组本身会影响父组件的状态。例如，在上面的示例中，父组件传递的数组arr在子组件中被修改，从而改变了父组件的状态。

5.向子组件传输数据时，添加还是不添加v-bind？

对于字面语法和动态语法，初学者在将数据从父组件模板传递到子组件时，可能会对是否添加v-bind感到困惑。

v-bind:msg='msg '

这是通过v-bind传输数据，传输的数据不是文字量，而是用双引号解析的表达式，也可以是实例上定义的数据和方法(实际上是指变量)。

Msg='在波浪中航行'

在这种没有v-bind的模式下，只能传递一个文字量，这个文字量仅限于string类数量和String类型。然后，如果要通过文字量传递数据，如果要传递非String类型，必须在道具名称前添加v-bind，通过实例在内部查找。如果实例端没有此属性和方法，它将默认为相应的数据类型。

: msg=' 11111 '/number : msg=' true '/boolean : msg='()={ console . log(1)} '//function : msg=' { a :1 } '//object II。事件

1.事件驱动和数据驱动

用本机JavaScript事件驱动流程通常是这样的：

首先，通过特定的选择器找到需要操作的节点——给节点添加相应的事件监控，然后用户执行一个事件(点击、输入、返回等)。)-调用JavaScript修改节点

这种模式对于业务来说不是问题，但是从开发成本和效率来说并不理想，尤其是当业务系统越来越大的时候。另一方面，发现和修改节点的效率很低，因此出现了数据驱动模式。

Vue的一个核心思想是数据驱动。所谓数据驱动，就是视图由数据驱动生成。当我们修改视图时，我们不会直接操作DOM，而是修改数据。流程如下：

用户执行一个操作——反馈给VM处理(会导致Model发生变化)——VM层发生变化，通过绑定关系直接更新页面对应位置的数据

可以简单理解为数据驱动不操作节点，而是通过虚拟抽象数据层直接更新页面。正因为如此，数据驱动框架可以运行得更快(因为它不需要折腾节点)，并且可以应用于大型项目。

2.修饰符事件

Vue事件分为普通事件和修饰语事件。这里主要介绍修饰语事件。

Vue提供了大量的修饰符来封装这些过滤器和判断，这样开发人员可以编写更少的代码，将时间投入到业务和逻辑中，只需要通过一个修饰符来调用它们。让我们首先考虑这个问题：如何将本机click事件绑定到这个自定义组件custom-component？

自定义组件组件内容/自定义组件如果你的答案是自定义组件@click='xxx '，那就错了。@单击此处是自定义事件单击，而不是本机事件单击。绑定本机点击是这样的：

在定制组件@ click.native=' XXX '组件内容/定制组件的实际开发过程中，事件修饰符是必不可少的。常见的事件修饰符包括：

形状修饰词

1).懒惰的

默认情况下，v-model会在触发每个输入事件后将输入框的值与数据同步。您可以添加lazy修饰符，从而改为使用change事件进行同步。适用于输入所有内容后光标离开后视图才更新的场景。

2).整齐

如果您想自动过滤用户输入的第一个和最后一个空白字符，您可以向v型添加修剪修改器：

修改器输入v-model.trim='msg '可以过滤掉密码被不小心敲到空格的场景。需要注意的是，它只能过滤前导空格和尾随空格！第一个和最后一个，中间的不会被过滤。

3).数字

如果您想自动将用户的输入值转换为数字类型，您可以向v-model添加数字修改器：

输入v-model . number=' value ' type=' text '/

从上面的例子，我们可以得到，如果你先输入数字，它会限制你只输入数字。如果先输入一个字符串，就相当于不加。号码。

事件修饰符

！-防止点击事件扩散-a v-: click。停下来！-提交事件不再重载页面-表单v-: submit . prevent=' on submit '/表单！-修改器可以串联-a v-: click。停下来。防止='那样做'/a iii。狭槽

插槽分为普通插槽和作用域插槽，但它们相似，只是作用域插槽可以接受子组件传递的参数。

1.范围槽

让我们通过todolist的例子来了解范围槽。如果选择项时文本变成黄色(如下图所示)，如何实现？

//父组件模板div class='toList '输入v-model=' info ' type=' text '/button @ click=' addItem '添加/button ul ToToToItem v-for=' listData ' : key=' index '模板v-slot:item='itemProps' /中的（项目，索引)'这是个具名插槽//其中项目道具的值就是子组件传递过来的对象span : style=' { font size : ' 20px '，color: itemProps.checked '黄色' : '蓝色} ' { { item } }/span/template/ToTooItem/ul/div/template脚本导入到Tooitem from ' ./ToToToItem '；导出默认{ components : { ToToTooitem }，data() { return { info: ' '，ListData:[]}；}，方法： { addItem(){ this。列表数据。推(这个。信息)；this.info=} } }/script/子组件模板div li class='item '输入v-model=' checked ' type=' checked '/slot name=' item ' : checked=' checked '/slot//将检查的值传递给父组件/Li/div/templatescriptexport default { data(){ return { checked : false }；}};/script值得注意：v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个Java脚本语言对象CSS。属性名可以用驼峰式（卡米凯斯)或短横线分隔（烤串盒，记得用引号括起来)来命名。

2.v形槽新语法

在2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法（即v形槽指令)。它取代了狭槽和投币式示波器。

我们通过一个例子介绍下默认插槽、具名插槽和作用域插槽的新语法：

//父组件模板div class='helloSlot' h22.6新语法/h2 SlotDemo p默认插槽：默认插槽/p模板v形槽：插槽/p具名插槽：标题槽1/p p具名插槽：标题插槽2/p/模板模板v形槽：item=“道具”p作用域插槽：项目插槽-作用域{ {道具} }/p/模板/Slot演示/div/模板脚本从""导入插槽“/slot”；导出默认{组件： {插槽演示：插槽} };/script/子组件模板差异插槽/插槽名称='title' /插槽名称=' item ' : prop data=' prop data '/div/template script导出默认值{ data(){ return { prop data 3360 { value : }浪里行舟' } };}};/脚本

总结

以上所述是小编给大家介绍的某视频剪辑软件组件三大核心概念图文详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！