Vue全局组件和局部组件及组件传值

全局组件注册

就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。下面是使用在root根示例下的first-component全局组件：

image.png

使用Vue.component定义的全局组件里面的data，和普通new Vue示例里面的data有所不同，Vue.component定义的时候data必须是一个function，而new Vue实例里边data必须是一对象

image.png

关于Vue.component里面组件命名以及标签使用的时候的一些问题：

html标签是不区分大小写的，但是如果注册组件的时候使用了驼峰命名或者帕斯卡命名，html标签里面必须以短横线分隔命名，如果注册组件的时候不是驼峰命名或者帕斯卡命名的话，html标签是不区分大小写的。如下：

image.png

局部组件注册

局部组件注册在vue实例中的components对象里面，可以注册多个局部组件，只有在实例中注册了该组件的根元素才能够使用这个组件，所有叫做局部组件。注意js中定义变量时不允许中线链接，所以这里定义使用帕斯卡或者驼峰，则根元素中使用组件时需要使用中线连接

image.png

关于上面的name属性传参时，当设级到动态的值需要使用v-bind:进行绑定。通过props获取值。Vue中的props自带属性类型检测，如下：

image.png

Vue中is属性渲染动态组件

下图示例通过点击国际新闻，国内新闻修改data中currentTab的值，然后html中使用is动态绑定值获取组件。（is属性还有一个作用就是，当组件嵌套不符合html规则的时候，通过将组件修改为标签，然后is属性绑定组件即可）

image.png

Vue中组件间传参问题

子组件像父组件传参：

需要在子组件上通过$.emit这个对象注册事件监听（第一个参数是事件名，第二个参数是需要传递的值），之后再父组件中通过v-on:绑定事件，若触发该事件则触发一个父组件的方法，

image.png

若父组件像子组件传参：

则在父组件中以属性的形式传值，在子组件中以props获取，子组件里面可以通过插值表达式调用

image.png