【.com原稿】前言本文主要介绍vue的三个基本概念，属性，事件，槽，使用方法以及一些容易被忽略的重要细节。如果你看别人写的组件，你也可以从这三部分展开，这样可以帮助你快速了解一个组件的所有功能。本文代码请戳github博客。纸上谈兵太肤浅了。让我们做更多的代码！一、属性1、自定义属性propsprop定义了这个组件的可配置属性，组件的核心功能也由它决定。写通用组件的时候，最好把props写成对象的形式，这样可以为每个属性设置类型，默认值，或者自定义检查属性值。这在组件开发中非常重要，但很多人忽略了它，直接使用props的数组用法，这样的组件往往不够精确。//父组件//子组件props:{name:String,type:{ //从父组件传入的类型，它的值必须是指定的'success','warning','danger'之一，如果是其他值如果传入这三个，则会抛出警告validator:(value)=>{return['success','warning','danger'].includes(value)}},onChange:{//数据，可以是各种数据类型，也可以传一个函数type:Function,default:()=>{}},isVisible:{type:Boolean,default:false},list:{type:Array,//对象或数组的默认值必须从一个工厂函数中获取default:()=>[]}}从上面的例子可以看出，props可以显示和定义一个或多个数据。对于接收到的数据，可以是各种数据类型，也可以传递一个函数。2.inheritAttrs这是2.4.0新增的API。默认情况下，父作用域中不被视为props的功能绑定将“回退”并作为普通HTML功能应用于子组件的根元素。通过将inheritAttrs设置为false，这些默认行为将被删除。注意：此选项不影响类和样式绑定。前面的例子中，如果子组件的props中没有声明title属性，那么默认会挂在子组件的根元素上，如下图所示：3.data和props的区别在于相同的。两个选项都可以存储各种行为操作变化时，所有行为操作使用的数据和模板渲染的数据都会同步变化。不同之处在于数据称为动态数据。在每个实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，而不受任何环境的影响。props称为静态数据。在每个实例中，一旦在初始化中定义了类型，基于Vue，它是一个单向数据流。它的数据类型在传递数据时不能改变，也不允许直接在子组件中改变。您需要使用其他方式更改传输源中的数据，而不是对传递的props数据进行操作。至于怎么改，我们接下来会详细介绍。4、单向数据流的概念出现在组件通信中。props的数据通过父组件或上层组件数据或字面量传递。不允许直接操作更改各个实例中的道具数据。相反，需要其他方法来更改传输源中的数据。.那么如果有时候我们想要修改传递的prop，有哪些方式呢？方法一：转至data选项，在子组件的data中复制一个prop。可以修改数据。exportdefault{props:{type:String},data(){return{currentType:this.type}}}通过data选项中的currentType接收props中的类型数据，相当于对currentType=type进行赋值操作，不仅可以得到currentType数据，而且还可以改变currentType数据。方法二：使用计算属性exportdefault{props:{type:String},computed:{normalizedType:function(){returnthis.type.toUpperCase();}}}虽然以上两种方法都可以间接修改props中的值subcomponents，但是如果子组件要修改数据同步更新到父组件也无济于事。在某些情况下，我们可能需要对一个prop进行“双向绑定”。这时候推荐以下两种方法：方法三：使用.sync//父组件父组件msg:{{msg}}
父组件数组：{{arr}}
