04组件

Vue的组件

组件的使用

组件（component）是vue最强大的功能之一，可以扩展Html元素，封装可重用的代码。大型项目中为了分工、代码复用、提高维护性，需要将应用分解为多个相对独立的模块进行开发，为此vue就产生了组件功能。在我们之前的课程中我们也已经接触过了组件

组件的作用域

组件中的data必须是函数

Vue的组件嵌套

props

使用props向子组件传递数据
组件实例的作用域是孤立的。因此不能并且不应该在子组件的模板内直接引用父组件的数据。但是实际开发中，经常需要在多个组件之间进行数据传递，从而更新页面。因此就需要用到props，通过props可以把父组件的数据传递给子组件。

父组件通过 props 向下传递数据给子组件。
子组件通过 events 给父组件发送消息。

单值传递实例

props的命名规范
如果在props中使用了驼峰命名（myName，myProps），在模板中需要使用短横线形式（my-name）
如果是简单的字符串形式无限制

多指传递实例

props的动态传值：这里又运用到了我们的v-model指令，进行双向数据绑定。

首先在父类引入需要给到值的子类，然后 加到父类的组件， 在html模板里引用这个组件<子类组件 :传递回去的值 = “绑定的值”>

然后在子类中 写一个 props[‘传递回来的值’] ，然后在html模板里引用这个回来的值

props的验证

将子组件中的props数组方式改成对象方式，可对一个或者多个数据进行数据类型验证，验证时需要添加对应的数据类型

props：[myMessage:String,age:Number]

slot插槽

使用slot插槽内容分发
slot插槽为父组件提供了安插内容到子组件中的方法，其作用相当于占位符，在Html模板中占了一个位置，方便传入一些内容

插槽又分为：
单插槽（或称为匿名插槽）
具名插槽
作用域插槽

单插槽（或称为匿名插槽）

匿名插槽实例

匿名插槽呢 就是六亲不认 只认不带名字的default

具名插槽

如果一个组件中需要使用多个slot就需要使用具名插槽，通过name属性来分发内容

具名插槽在子组件的接收器中带了名字 属性name

他是不会去找匿名发射器的，具名的接收器一定会去找和接收器 名字相同的发射器