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