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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,905评论 1 12
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,270评论 0 25
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,097评论 4 129
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,528评论 0 13
  • 若能无视 若能当做不存在 是否此刻 她不会悲伤哭泣 命运把男女栓在一起 骄傲的心 让女人无法不在意 痛 穿透每一根...
    方雅妮阅读 327评论 3 12