您的位置:首页 > Web前端 > Vue.js

VUE学习笔记-组件学习

2019-04-19 17:01 369 查看

VUE的组件是为了拆分vue实例

  • 模块化:基于功能划分,用于保存模块职能单一
  • 组件化:基于UI界面划分,方便UI组件的复用

VUE组件的使用过程(基础用法)

  • vue.extend 先扩展(扩展的template字串里面,只有拥有一个根节点)
  • vue.component中注册(注册名建议全部小写)
  • UI中直接引用 (引用组件名称也是全部小写)

VUE的组件使用方法(使用template来产生组件的模板)

  1. 在el的同级定义一个template模板
  2. 在Vue.compent注册template模板,绑定模板名称
  3. 在界面上引用

私有组件与全局组件定义方法类似,区分只是引用 的范围不同

组件中也可以定义data 数据的引用与实例的data 一样,但是data的属性,必须要返回一个function的对象

组件中使用自定义方法

  1. 由于每个定义组件时,都会初始化一个新的data 对象,所以在同时引用多次组件时,互不影响


组件的传值:首先在引用组件上绑定需要传值的数据,然后在子组件上声明传值的对象名

  1. 实例上的数据可读,可修改
  2. 子组件上的数据只读


组件上的方法传递:

  1. 最外层组件引用时,指定需要引用实例的方法名,及组件的方法名
  2. 在组件的props上不用注册方法名,但是组件方法中应用时,需要使用this.$emit(“方法名”)来调用

组件上的方法传递:父子组件传值

  1. 首先实现子组件调用父组件的方法
  2. 同时传入子组建的data数据
  3. 在父组件中完成数据更新

组件上定义一个ref 之后,就可以从外部访问子组件的数据及方法。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: