A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 许航燕 初级黑马   /  2019-6-21 13:55  /  1158 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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 将事件和数据传递给父组件
    - 父组件的子组件标签中绑定监听事件(处理子组件的事件)
    - 父组件定义监听子组件事件的方法

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马