vue中须要掌握的点

1.首先是生命周期:其实只有四个单词,记住就行了并不难记javascript

为了说明组件建立,存在,销毁的过程,提供了组件生命周期java

组件共分三大周期:建立期,存在期,销毁期ios

建立期:json

beforeCreate 组件即将建立,此时什么数据都没法访问axios

created 组件建立完成,此时咱们能够访问绑定的数据以及自定义事件app

beforeMount 组件即将构建,此时肯定了容器元素和模板渲染方法,可是没有上树post

mounted 组件构建完成,此时组件已经上树,咱们能够看到该组件this

存在期(数据更新)url

beforeUpdate 组件即将更新,此时视图尚未更新spa

updated 组件更新完成,此时视图中的数据已经更新

这里是环状的,一次更新结束并不表明彻底结束

销毁期

beforeDestory 组件即将销毁,此时数据还没有销毁

destroyed 组件已经销毁,此时没法访问绑定的数据,子组件,自定义事件了

在keep-alive中使用组件的时候,组件从页面中移除并不会销毁,而是进入激活或者未激活状态

activated 组件已经被激活,此时组件显示出来了

deactivated 组件已经被移除,此时组件已经被隐藏

以上方法都没有参数,this都指向实例化对象

2.父子组件的通讯

2.1父组件向子组件通讯

自定义属性

<home :color="color" :parent-msg="msg"></home>

// 定义两个组件
var home = Vue.extend({
    // 第二步 子组件接收数据
    props: ['color', 'parentMsg'],
    // 模板
    template: '<h1>child: {{color}}--{{parentMsg}}--{{this.$parent.msg}}</h1>',
    // 查看组件实例化对象
    mounted() {
        // 也能够经过$parent访问父组件,可是不建议
    console.log(this, this.$parent.msg, this.$parent.color)
    }
})

子组件向父组件通讯,能够使用自定义事件来实现

 封装方法请求的方法

postApi:function(params,url) {
    let requestHeader = {
      'uk': localStorage.getItem('accessToken'),
      'Content-Type': 'application/json charset=UTF-8'
    };
    let axiosOptions = {
        method:"post",
        url:url,
        data:params,
        headers:requestHeader
    };
    return axios(axiosOptions).then(res => res.data);
  },
相关文章
相关标签/搜索