全局组件注册
就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。下面是使用在root根示例下的first-component
全局组件:
使用Vue.component定义的全局组件里面的data,和普通new Vue示例里面的data有所不同,Vue.component定义的时候data必须是一个function,而new Vue实例里边data必须是一对象
关于Vue.component里面组件命名以及标签使用的时候的一些问题:
html标签是不区分大小写的,但是如果注册组件的时候使用了驼峰命名或者帕斯卡命名,html标签里面必须以短横线分隔命名,如果注册组件的时候不是驼峰命名或者帕斯卡命名的话,html标签是不区分大小写的。如下:
局部组件注册
局部组件注册在vue实例中的components对象里面,可以注册多个局部组件,只有在实例中注册了该组件的根元素才能够使用这个组件,所有叫做局部组件。注意js中定义变量时不允许中线链接,所以这里定义使用帕斯卡或者驼峰,则根元素中使用组件时需要使用中线连接
关于上面的name属性传参时,当设级到动态的值需要使用
v-bind:
进行绑定。通过props获取值。Vue中的props自带属性类型检测,如下:Vue中is属性渲染动态组件
下图示例通过点击国际新闻,国内新闻修改data中currentTab的值,然后html中使用is动态绑定值获取组件。(is属性还有一个作用就是,当组件嵌套不符合html规则的时候,通过将组件修改为标签,然后is属性绑定组件即可)
Vue中组件间传参问题
子组件像父组件传参:
需要在子组件上通过$.emit
这个对象注册事件监听(第一个参数是事件名,第二个参数是需要传递的值),之后再父组件中通过v-on:
绑定事件,若触发该事件则触发一个父组件的方法,
若父组件像子组件传参:
则在父组件中以属性的形式传值,在子组件中以props获取,子组件里面可以通过插值表达式调用