Question

我使用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; 
  }
}

Answer 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内的值。

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

1 个答案:

在vuejs

具有v-model的自定义组件