Question

如何将变量传递给Vue.js中的组件（而不是通过props）？有可能吗？

这是app.js：

import PlayingField from '../app/components/PlayingField'
import GameConfig from '../../gameConfig'

new Vue({
    el: '#app',
    components: {
        playingfield: PlayingField,
    },
    data: {
        gameConfig: GameConfig
    }
});

在游戏配置中为json，并且有键“ maxUniqueCards”，这个值我要在组件playingField中使用。...在模板中没有，但是在下一次使用它的属性中...（生成卡，定单...。只是在playField组件方法中使用...）

Answer 1

您可以使用$parent属性：

<template>
  <div>
    App
    <input type="text" v-model="propTest">
    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child.vue';

export default {
  name: 'App',
  components: { Child },
  data: () => ({
    propTest: 'abc',
  }),
};
</script>

<template>
  <div>
    child
    <button @click="test">Test</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    test() {
      console.log(this.$parent.propTest);
    },
  },
};
</script>

请谨慎使用此属性，在某些情况下必须使用：https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Parent-Component-Instance

Vuej.s：如何将变量传递给组件属性

1 个答案: