vuejs data里面的变量不能作为参数传递给函数吗？

Question

我有一个通用的函数func, 用来改变data里面的变量的值， 但是data里面的变量无法当作参数传递给函数吗？

<template>
    <div>
        <button @click="click1">btn1</button>
        <button @click="click2">btn2</button>
    </div>

</template>

<script>
import card1 from ***
import card2 from ***

data () {
    return {
        card1,
        card2
    }  
},

method: {
    
    click1 () {
        this.func(this.card1)
    }
    
    click2 () {
        this.func(this.card2)
    }
    
    // 通用函数
    func (card) {
        card = '***'
    }
}
</script>

Answer 1

可以的，但是原始类型的数据只是值传递，你在func里面改变card，只是改变形参card，并不是改变组件变量，可以做如下修改

func (str) {
    this[str] = '***'
}

this.func('card1')

Answer 2

func (card) {
    card = '***'
}

这里的 card = '***' 只是让 card 变量的值改变，并不会让 this.func(this.card1) 中的参数的值发生改变。

除了下面这种情况:

func (card) {
    card.someField = '***' // 这会在 this.func(this.card1) 时使得 card1.someFiled 的值被改变
}

具体区别请查阅 "值、引用" 相关文章。

Answer 3

我也遇到这个问题了：不同参数获取的值要赋值给不同变量。
我的解决方式：使用回调函数。

click1 () {
    this.func((res) => {
        this.card1 = res
    })
}
func(callback) {
    callback('xxxx');
}