2021-06-25 computed如何实现传参 vue的ho
2022-05-11 本文已影响0人
半眼鱼
//html
<div>{{total(3)}}</div>
//js
computed:{
total(){
return function(n){
return n *this.num
}
}
}
// 7. vue的hook的使用
// 7.1 同一组件中使用
export default{
methods:{
fn(){
const timer = setInterval(()=>{
console.log(1)
},1000)
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer)
timer = null;
})
}
}
}
// 7.2 父子组件使用
// 如果子组件需要在mounted时触发父组件的某一个函数,这么写:
<rl-child @hook:mounted = "childMountedHandle" />
methods:{
childMountedHandle(){
}
}
10. 动态指令和参数使用过吗?
<template>
...
<aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>
...
data(){
return{
...
someEvent: someCondition ? "click" : "dbclick",
someProps: someCondition ? "num" : "price"
}
},
methods: {
handleSomeEvent(){
// handle some event
}
}
</script>
11. 相同的路由组件如何重新渲染?
<template>
<router-view :key="$route.path"></router-view>
</template>
13. 如何将获取data中某一个数据的初始状态?
data() {
return {
num: 10
},
mounted() {
this.num = 1000
},
methods: {
howMuch() {
// 计算出num增加了多少,那就是1000 - 初始值
// 可以通过this.$options.data().xxx来获取初始值
console.log(1000 - this.$options.data().num)
}
}
//this.$options.data().xxx