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

Posted 2023-02-23

【中文标题】如何从 App.vue 访问组件属性

【英文标题】：How to access a component property from 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的代码吗？

【参考方案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 中的值。