vue.js 我如何在合成API中观看 prop ?

ryevplcw  于 2023-01-31  发布在  Vue.js
关注(0)|答案(2)|浏览(142)

当 prop 更新时,我如何调用函数?
父容器:

<div>     
  <Maintable :type="typeRef" :country="countryRef" />
</div>

子容器:

export default{

    props: ['type'],
    
    setup(props)
    {   
        watch(props.type, () => {
            console.log('hello')
        })
    }

这段代码得到一个错误:无效的手表来源...我如何收听 prop 的更新?
希望有人能帮我一把!!:-)

72qzrwbm

72qzrwbm1#

尝试从函数返回prop作为第一个参数:

export default{

    props: ['type'],
    
    setup(props)
    {   
        watch(()=>props.type, (newVal) => {
            console.log('hello')
        })
    }

执行watch(()=>props.type而不是watch(props.type,因为()=>props.type是一个返回prop的箭头函数,它是watcher属性的参数

mzaanser

mzaanser2#

您有两种可能的解决方案:
1.您可以创建计算属性并对其进行监视

import {computed, watch} from 'vue';

export default {
  props: ['type'],

  setup(props) {
    const type = computed(() => props.type);

    watch(type, (newValue) => {
      console.log('hello');
    });
  }
}

1.您可以像这样使用箭头函数

import {watch} from 'vue';

export default {

  props: ['type'],

  setup(props) {   
    watch(() => props.type, (newValue) => {
        console.log('hello');
    });
  }
}

相关问题