黑马程序员技术交流社区

标题: Vue组件 [打印本页]

---

作者: 许航燕    时间: 2019-6-21 13:55
标题: Vue组件
Vue组件

- vue组件：封装前端vue特效代码，便于引用
- 全局组件
  - 全局组件通过Vue.component在script标签中注册
    - 参数1：指定组件名称
    - 参数2：{}对象，{}内通过template指定组件要加载的内容
  - 全局组件调用：在div标签中通过组件名称进行调用
- 局部组件
  - 局部组件定义：var 组件名称={}对象，{}内通过template指定组件要加载的内容
  - 在全局组件中定义components属性，components:{}将局部组件注册到全局组件中，进行组件的嵌套
  - 在全局组件的template属性中调用局部组件
  - 局部组件定义在全局组件之前，才能调用
- 组件中的数据绑定data，data属性对应的是一个函数方法，函数中返回绑定的数据
  - 在template中对指定的数据进行调用
- 组件传值
  - 父组件通过props属性给子组件传值
    - 子组件中定义props:['用来接收父组件值的变量']
    - 子组件template中调用该变量{{变量}}
    - 全局组件中调用子组件时，通过v-bind:变量='父组件要传的值'指定父组件的传值
  - 子组件通过$emit给父组件传值
    - 子组件template中绑定触发事件<button v-on:click="isupload"> 上传</button>
    - 子组件定义 methods：{isupload：function（）{this.$emit('事件'，’数据‘)}}，子组件上的点击事件成功后，通过 $emit 将事件和数据传递给父组件
    - 父组件的子组件标签中绑定监听事件（处理子组件的事件）
    - 父组件定义监听子组件事件的方法

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2