Question

我对Vue很陌生，在从组件访问主要Vue实例中的数据时遇到困难。在Vue实例中，我有：

var vm = new Vue({
    computed: {},
    data: {
      show: true
    },

在组件中，我想做类似的事情：

<button v-show="vm.show" @click="setDefaults(styleguide)">Set Default</button>

我的目标是当“显示”值更改时，我想显示/隐藏按钮。这有点困难/奇怪，因为我在组件而不是html中创建模板。当我尝试此代码时，它不理解'vm.show'。我觉得我需要在组件中创建数据并将数据绑定到“ show”变量，或者在组件中创建计算对象或其他东西（我相信计算对象就像观察者吗？）。如果有解决此问题的简便方法，请提供帮助。

Answer 1

我也是VueJs的新手，但我认为问题是您没有为Vue实例提供el参数，在这种情况下，将Vue实例分配给变量不会执行任何操作

我想你想要类似的东西

<div id="app">
  <button v-show="show" @click="setDefaults(styleguide)">Set Default</button>
</div>

<script>
new Vue({
  el: '#app',
  computed: {},
  data: {
    show: true
  },
  ...
);
</script>

Answer 2

两件事，在模板中，所有变量的作用域已经从组件中确定了范围，因此您无需在其中使用vm.。第二件事是组件的data属性需要一个返回对象的函数。

var vm = new Vue({
  computed: {},
  data: () => ({
    show: true
  }),

<button v-show="show" @click="setDefaults(styleguide)">Set Default</button>

如果您需要从父组件访问数据，则需要使用道具将其传递。您也可以尝试使用provide/inject来做到这一点，如果更适合您的用例

Answer 3

所以我想我的问题不是很清楚，但我想出了办法。在组件代码中，我需要添加：

Vue.component('styleguide', {
    computed: {
        show: function () {
            return vm.show
        }
    },
    props: ['styleguide'],
    template: `
    <div>
        <div>
            <p>
                <button v-show="show" @click="setDefaults(styleguide)">Set Default</button>

这使我可以从组件模板访问主Vue实例中的“显示”。每当其他组件在主Vue实例中修改“ show”变量时，该按钮就会消失/重新出现。我不确定这是否有意义，但这就是我如何使其工作。

来自组件的Vue数据Vue对象变量

3 个答案: