vue base (二)

1.props父组件向子组件传值

父组件： <div><Child :name="name"></Child></div>

子组件： props: {name: String}

2.emit子组件向父组件传值

父组件： <div><Child @getValue="getValue"></Child></div>

子组件： this.$emit("getValue", value)

3.sync修饰符 可以使数据双向流动，慎用

父组件： <div><Child :name.sync="name"></Child></div>

子组件： props: {name: String} this.$emit("update:name", newName)

4.keep-alive 和 transition

keep-alive可以缓存组件的状态，在activated钩子函数中激活组件，include和exclude 可以选择哪些组件进行缓存

transition 组件过渡效果，属性有name, mode, appear

<transition name="slide" mode="out-in" appear> <keep-alive exclude="account"> <router-view :key="$route.fullPath" /> </keep-alive> </transition>

router-view 的 key="$route.fullPath" 是不复用组件，使组件能够重新渲染

相关钩子函数加载顺序为 beforeRouteUpdate => created => mounted