vue常用方法

父组件调用子组件的方法

//子组件

<child ref="myChild"></child>

//父组件调用

this.$refs.mychild.childFun("父组件数据");

子组件向父组件传参

//子组件调用

this.$emit("child","子组件的数据");

//父组件

<father v-on:child="getChild"></father>

深度监听对象,数组

watch:{

    myData:{

        hander(val,oldVal){

            console.log(val);

        },

       deep: true

    },

}

路由嵌套

//页面

<router-view :id="id"></router-view>

//获取动态路由参数

this.$route.params.id

this.$route.query   //查询参数？

//路由

new Router({

    routes: [

        path: '/home',

        name: 'home,

        component: resolve => require(["../components/myHome.vue"],resolve),

        redirect: {name: "child01"}, //默认显示

        children: [

            {

                path: 'child01'，

                name: 'child01',

                component: resolve => require(["../components/home/page01.vue"],resolve)}

            },

            {

                path: 'child02/:id'，    //动态路由

                name: 'child02',

                component:  resolve => require(["../components/home/page02.vue"],resolve)} 

            }

        ]

    ]

})

路由跳转

// 组件

<router-link to="/page01"></router-link>

// 方法

this.$router.push({path: '/page01'},query:{id: '001'})

获取更新后的DOM（页面加载完渲染）

this.$nextTick(() => {

    //代码块

})

vue 计算属性

computed: {

    reversedMessage: function(){

        return this.message.split('').reverse().join('')

    }

}

监听路由跳转

watch:{
    $route(to,from){
        console.log(to)
    }
}

监听数组（深度监听对象或数组的变化）

watch:{
    arr:{
        handler(val){
            console.log("深度监听数组或对象的变化")
        }，

        deep: true
    }
}

修改数组的方法

this.$set(this.arr,0,"修改数组下标为0的值")；