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

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相互通信。

1. props ：促进父母与孩子之间的交流。
2. 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 的自定义组件

这需要两个要求。

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

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

2. 您使用该值发出事件input 。

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

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