javascript - 如何将数据传递给 mixins，然后将它们显示在您的组件中？

Question

我想将数据传递到我的 mixin 方法，然后将其显示在我的组件中。像这样的东西:

//component A

mixins: [mixinOne],
data(){
  return{
    val = null
  }
},
mounted(){
  this.mixinMethod('good value', this.val);
}

//mixinOne
mixinMethod(valOne, valTwo) {
  valTwo = valOne;
}

在我的模板中，我想显示 val:

// component A
<template>
  {{val}}
</template>

我写了上面的代码，但是没有用。它为 {{val}} 返回 null!所以基本上我想在我的组件中看到通过我的 mixin 设置的 {{val}} 的“良好值(value)”。我该怎么做？

Answer 1

你应该把你的数据部分放在 mixin 中然后改变它并在你的组件中渲染它。

// MmixinOne
data () {
  return {
    val = null
  }
},
methods: {
  mixinMethod (valOne, valTwo) {
     valTwo = valOne
  }
}

// Component A
<template>
  {{val}}
</template>

<script>
import MmixinOne from './MmixinOne'

export default {
  mixins: [MmixinOne],
  mounted () {
    this.mixinMethod('good value', this.val)
  }
}
</script>

无论如何，您不需要一种方法来设置“val”的值。你可以直接在 mounted 中设置你的值:

mounted () {
  this.val = 'good value'
}