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

上一篇 下一篇

猜你喜欢

热点阅读