1-5. Vue.js核心知识之组件化

weknow619 发布于2019-08-23 18:00 / 515人阅读

摘要：组件是最强大的功能之一。组件的创建和注册我们可以使用注册一个全局组件。父组件的数据需要通过才能下发到子组件中。如果传入的数据不符合要求，会发出警告。这对于开发给他人使用的组件非常有用。

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

组件的创建和注册

我们可以使用 Vue.component(tagName, options)注册一个全局组件。








  我的组件

我们还可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件，即局部组件。







  我的组件

使用prop
组件实例的作用域是孤立的。父组件的数据需要通过 prop 才能下发到子组件中。

如果想要传递一个变量到子组件中去，即传给子组件的值会跟随父组件中该变量的值的变化而变化，我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。

我们还可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。

自定义事件进行组件通讯

现在我们父组件可以使用 prop 传递数据给子组件。但子组件怎么跟父组件进行通信呢？这里我们可以通过自定义事件来实现。

具体点说就是使用 $on(eventName) 监听事件，使用 $emit(eventName, optionalPayload) 触发事件。

使用插槽分发内容

为了让组件可以自由组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。我们可以使用特殊的元素作为原始内容的插槽，从而实现内容分发。

如果子组件模板包含一个插口，那么父组件的内容将会被渲染到插槽中。



  
    子组件的标题
    
      只有在没有要分发的内容时才会显示。
    
  







  父组件的标题
  
    子组件的标题
    这是将会分发到子组件的一些初始内容

当需要有多个插槽时，我们可以在元素上用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽配置不同的名字，这时具名插槽将匹配内容片段中有对应 slot 特性 name 的元素。









  
    头部标题
  
  
    主体内容的一个段落。
  
  
    尾部版权信息

总结

本节主要知识点是vue.js中组件的创建和注册，父组件使用prop向子组件传递数据并进行数据验证，使用自定义事件进行组件间的通讯，使用插槽来使组件可以自由组合。vue.js组件是vue框架中最强大的功能，学完后相信你对web组件化也会有一定的了解了。

GPU云服务器云服务器 js核心知识 java核心知识点 Vue.js vue.js 属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104515.html

1-1. Vue.js核心知识之实例简介

摘要：的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。全局注册全局注册组件我的组件创建根实例渲染后的我的组件总结本节学习的核心知识点莫过于模板渲染表单绑定事件处理组件化这几点了，下面我们针对每一个知识点细细学习。 Vue.js是什么 Vue.js是一套用于构建用户界面的渐进式框架。Vue.js的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。Vue.js与现代化的工...

amuqiao 2019-08-23 18:00 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 评论0 收藏0