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;
}
}
If you have a parent component called parent
and child component called child, you can communicate between each other using props
and events
.
props
: Facilitates communication from parent to child. 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>
This needs two requirements .
You have a prop on the child component with the name value
.
props: ['value'], // this part in the child component snippet
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.