如何从 App.vue 访问组件属性答案

【问题标题】：How to access a component property from App.vue如何从 App.vue 访问组件属性
【发布时间】：2017-07-26 09:25:39
【问题描述】：

我使用 vue-loader 来帮助我安装 vue 和 webpack 我有一个名为 App.vue 的文件

在 App.vue 中，我添加了一个名为 widget 的组件。如果我单击某个按钮，则会有一个设置 btnClicked = true 的功能，因此小部件会出现

<widget v-show="btnClicked"></widget>

但我也希望该函数能够访问widgetShowMe，它是我组件中的一个属性。

我希望在我的App.vue 中激活的功能也设置为 widgetShowMe = true 我试过了，但是没有用

methods:{
  btnClickedFunc () {
    this.btnClicked = true;
    Widget.widgetShowMe = true; 
  }
}

【问题讨论】：

这不起作用，因为首先要访问组件上的方法，您需要 Component.methods.methodName 发布，您仍然无法像这样使用它，而且您不应该这样做。能否请您指定您希望使用内部组件功能实现什么？
我没有尝试访问方法，我需要访问组件数据，所以我也尝试了 Widget.data.widgetShowMe = true;它没有工作我想要的只是在单击按钮后显示一个组件
好吧，这样不行。最好使用 v-model。我将添加一个答案来说明如何。
可以添加Widget的代码吗？

标签： javascript web-deployment vuejs2

【解决方案1】：

在vuejs中访问父组件中子组件的数据

如果您有一个名为parent 的父组件和一个名为child 的子组件，您可以使用props 和events 相互通信。

props：促进父母与孩子之间的交流。
events：可用于将子组件中的数据传递给父组件。

对于这个问题，我们需要事件并将使用v-model 使子组件在任何地方都可以使用，而需要更少的设置。

Vue.component('counter', {
  template: `<div><button @click='add'>+1</button>
  <button @click='sub'>-1</button>
  <div>this is inside the child component: {{ result }}</div></div>`,
  data () {
    return {
      result: 0
    }
  },
  props: ['value'],
  methods: {
    emitResult () {
      this.$emit('input', this.result)
    },
    add () {
      this.result += 1
      this.emitResult()
    },
    sub () {
      this.result -= 1
      this.emitResult()
    }
  }  
})

new Vue({
  el: '#demo',
  data () {
    return {
      resultFromChild: null
    }
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id='demo'>
  <counter v-model='resultFromChild'></counter>
  This is in parent component {{ resultFromChild }}
</div>

带有 v-model 的自定义组件

这需要两个requirements。

您在子组件上有一个名为 value 的道具。

props: ['value'], // this part in the child component snippet

您发出带有值的事件input。

this.$emit('input', this.result) // this part in the child component snippet

您需要考虑的是，何时发出具有widgetShowMe 值的事件，并且您的app.vue 可以轻松捕获widget 中的值。

【讨论】：