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