如何将数据传递给 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}}，它 returns 无效！所以基本上我想在我的 {{val}} 组件中看到 'good value'，这是通过我的 mixin 设置的。我该怎么做？

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'
}

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

how to pass data to mixins and then displaying them in your component?

javascript

mixins

vue.js

nuxt.js