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

【问题标题】：how to pass data to mixins and then displaying them in your component?如何将数据传递给 mixins，然后在组件中显示它们？
【发布时间】：2021-03-04 07:25:45
【问题描述】：

我想将数据传递给我的 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！所以基本上我想在我的组件中看到 {{val}} 的“好价值”，这是通过我的 mixin 设置的。我该怎么做？

【问题讨论】：

除了给你的答案之外，你确实有这部分文档：vuejs.org/v2/guide/mixins.html#Basics

标签： javascript vue.js nuxt.js mixins

【解决方案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'
}

【讨论】：