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

Question

I used vue-loader to help me install vue and webpack I have a file called App.vue

In App.vue I added a component called widget. If I clicked some button there's a function that set the btnClicked = true hence the widget appears

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

but I also want that function to access the widgetShowMe , it's a property in my component.

I want the function activated in my App.vue to also set widgetShowMe = true I tried this but it didn't work

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

Answer 1

Accessing child component's data in parent component in vuejs

If you have a parent component called parent and child component called child, you can communicate between each other using props and events .

1. props : Facilitates communication from parent to child.
2. events : Can be used to pass data in a child component to the parent component.

For this question we require events and will use v-model to make the child component usable everywhere with much less setup.

 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>

Custom component with v-model

This needs two requirements .

1. You have a prop on the child component with the name value .

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

2. You emit the event input with the value.

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

All you need to think of is, when to emit the event with the value of widgetShowMe , and your app.vue can easily capture the value inside your widget .