vue全局组件与局部组件，以及组件间的传值

组建的特点：

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等；

组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。

但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板；

data必须是一个函数，不再是一个对象。

Vue全局组件注册后是在任何实例下都可以使用的，注册方式为

Vue.component('button-counter（组件名）', {

 template: 'You clicked me {{ count }} times.'

data(){

    return {  count: 0    }

  },

 })

局部组件只能在注册过的父组件使用，是直接在Vue实例里面注册，父组件调用时要使用

var Child = { template: '

A custom component!

' }

components{

'my-component': Child

}

注意：

局部组件定义时使用的时components,全局组件注册时Vue.component,多一个s

局部组件在注册的时候因为内容比较复杂，所以建议模板定义在一个全局变量里，代码看起来容易一点（项目中一般另外定义一个.vue文件，一个.vue文件就是一个组件，当要调用某个组件时，引入子组件，然后再components里面注册即可使用）

注意局部注册的组件在其子组件中不可用。

组件间传值：

父传子：

父组件调用子组件是传入message

 

子组件通过  props:['message']可以获得父组件传过来的值，多个值可以在数组里放入多个值获得

子传父：

子组件不能直接将值传给父组件，必须通过触发父组件绑定在子组件上监听的函数传值

父组件： 注意：若绑定的函数有参数，函数名后不要加括号

子组件：子组件会通过$emit('函数名',参数)形式触发父组件绑定的函数，子组件中需要以某种方式触发事件

非父子组件传值：

vue没有提供直接子组件对子组件的方法，如果是与父组件的父组件进行通讯可以采用链式传值，先传到父组件，然后经由父组件再传过去。但不推荐此方法进行非父子组件间的通讯。vue官网提供了vue状态管理来解决非父子组件间的通讯，vuex就香一个组件共用的仓库，不同组件间可以通过vuex进行值的更改与传递。更多关于vuex的使用等待vuex总结更新。

插槽：

Slot 通俗的理解就是“占位”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）

并且可以作为承载分发内容的出口

插槽内可以包含普通文本、也可以包含任何模板代码，包括HTML、其他组件、使用数据；

规则：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

(默认内容)插槽

有时候我们需要给插槽设置一个具体的默认内容，当别的组件没有给你内容的时候，那么默认的内容就会被渲染

具名插槽

有时候我们一个组件里需要多个插槽，元素有一个特殊的特性：name ，这个特性可以用来定义额外的插槽

如果一个不带name属性的话，那么它的name默认为default

在向具名插槽提供内容的时候，我们可以在