父组件调用子组件的方法
//子组件
<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的值")；
