如何使用 Vue.js 在父组件中更新的子组件中的数据？

Question

My parent component looks like this :

<template>
    ...
        <PaymentMethod/>
        ...
        <b-btn class="float-right" variant="primary" @click="add">
             OK
        </b-btn>
    ...
</template>
<script>
    export default {
        ...
        methods: {
            add() {
                ...
            }
        }
    }
</script>

My child component looks like :

<template>
    ...
        <b-form-select v-model="selected" :options="methodOptions" />
        ...
        <b-form-select v-model="termSelected" :options="termOptions" />
    ...
</template>
<script>
    export default {
        data () {
            return {
                selected: null,
                termSelected: null
            }
        },
        ...
    }
</script>

If the add method called from parent component, I want it get data selected in the child component

How can I do it?

Answer 1

Use Vuex, your store.js will look like :

 import Vue from 'vue';
 import Vuex from 'vuex';
   Vue.use(Vuex);


 const state = {
    selected: null
 };
 const mutations = {
    SET_SELECTED(state, selected) {
    state.selected =selected;
   }
   }

 export default new Vuex.Store({
    state,
   mutations
   })

in app.js :

import store from './vuex/store';
const app = new Vue({
el: '#app',
store,
...})

in parent component :

    <template>
     ...
   <PaymentMethod :selected="selected" />
     ...
        <b-btn class="float-right" variant="primary" @click="add">
        OK
        </b-btn>
     ...
    </template>
  <script>
   export default {
    data(){
     returen {
       selected:null    
     }
     },
    methods: {
        add() {
         ...
       this.$store.commit("SET_SELECTED",this.selected) 
      }
    }
 }
 </script>

in child component :

   <template>
     ...
     <b-form-select @change="selectItem" v-model="selected" 
             :options="methodOptions" />
   ...
 </template>
<script>
  export default {
   data () {
    return {
      selected:null
    }
 },
 methods:{
   selectItem(){
    this.$store.commit("SET_SELECTED",this.selected
    }
    ...
 }

Answer 2

One solution is to use the sync modifier along with computed getters and setters:

Parent Component

<template>
    ...
        <PaymentMethod :method.sync="method" :term.sync="term"/>
        ...
        <b-btn class="float-right" variant="primary" @click="add">
             OK
        </b-btn>
    ...
</template>
<script>
    export default {
        data () {
            return {
                method: null,
                term: null
            }
        },
        ...
    }
</script>

Child Component

<template>
    ...
        <b-form-select v-model="_method" :options="methodOptions" />
        ...
        <b-form-select v-model="_term" :options="termOptions" />
    ...
</template>
<script>
    export default {
        props: ['method', 'term'],
        computed: {
            _method: {
               get () {
                   return this.method
               },
               set (value) {
                   this.$emit('update:method', value)
               }
            },
            _term: {
               get () {
                   return this.term
               },
               set (value) {
                   this.$emit('update:term', value)
               }
            },
        },
        ...
    }
</script>

Now with the parent component's add method you have access to the child's selected method and term options:

methods: {
    add() {
        // this.method is the value of _method 
        // this.term is the value of _term
    }
}

Update

Since you've stated you want both the value and text of the selected term / method, I would suggest the following changes:

Parent

<template>
    ...
        <PaymentMethod :methods="methods" 
                       :terms="terms"  
                       :method.sync="method" 
                       :term.sync="term"/>
        ...
        <b-btn class="float-right" variant="primary" @click="add">
             OK
        </b-btn>
    ...
</template>
<script>
    export default {
        data () {
            return {
                // define your method and term arrays in the parent component.
                // pass them as props to the child component.
                methods: [{...}, {...}, {...}],
                terms: [{...}, {...}, {...}],
                method: null,
                term: null
            }
        },
        // use computed properties to retrieve the selected method / term option.
        computed: {
            selectedMethod () {
                return this.methods.find(method => method.value === this.method)
            },
            selectedTerm () {
                return this.terms.find(term => term.value === this.term)
            },
        }
        ...
    }
</script>

Child

<template>
    ...
        <b-form-select v-model="_method" :options="methods" />
        ...
        <b-form-select v-model="_term" :options="terms" />
    ...
</template>
<script>
    export default {
        props: ['method', 'term', 'methods', 'terms'],
        computed: {
            _method: {
               get () {
                   return this.method
               },
               set (value) {
                   this.$emit('update:method', value)
               }
            },
            _term: {
               get () {
                   return this.term
               },
               set (value) {
                   this.$emit('update:term', value)
               }
            },
        },
        ...
    }
</script>

Answer 3

The best and recommended way is using $emit
The bellow example could show you how? < /br>

 Vue.component('child-tmp', { props: ['post'], template: ` <button @click="$emit('add-like')">Like</button> ` }) new Vue({ el: "#app", data: { posts: [{ title: "Heading goes here 1", content: "Something sadofnd idfidif disong.", likes: 0 }, { title: "Heading 2 goes here", content: "Something sadofnd idfidif disong.", likes: 0 }], totalLikes: 0 } })

 <script src="https://unpkg.com/vue"></script> <div id="app"> <h2>Posts:</h2> <section> <div v-for="post in posts"> <h2> {{post.title}} </h2> <p> {{post.content}} </p> <child-tmp v-bind:post="post" v-on:add-like="post.likes = post.likes+1"></child-tmp><span style="margin-left:10px;">{{post.likes}}</span> </div> </section> </div>

In the above snippet you could see we are using props to read the data from parent to child and we use $emit to pass the data from child and v-on:add-like to receive the emitted data.

Answer 4

There are two ways:

1. You can either emit event when selecting data in child component:

<template>
    ...
        <b-form-select v-model="selected" :options="methodOptions" />
    ...
</template>
<script>
    export default {
        data () {
            return {
                selected: null
            }
        },
        ...
        methods: {
          onSelect() {
            this.$emit('selectData', this.selected);
          }
        }
    }
</script>

and then handle this event in parent component:

<template>
    ...
        <PaymentMethod @selectData="changeChildData($event)"/>
        ...
        <b-btn class="float-right" variant="primary" @click="add">
             OK
        </b-btn>

    ...
</template>
<script>
    export default {
        ...
        data() {
            return {
              childData: null
            }
        },
        methods: {
            changeChildData(newData) {
              this.childData = newData;
            },
            add() {
                ...
            }
        }
    }
</script>

2. or you can use storage Vuex

or event bus (simplified version of Vuex):

import Vue from 'vue';
export const EventBus = new Vue();

you pass data from child to event bus

<script>
    import { EventBus } from '../EventBus.js';
    export default {
        data () {
            return {
                selected: null
            }
        },
        ...
        methods: {
          onSelect() {
            EventBus.$emit('selectData', this.selected);
          }
        }
    }
</script>

and subscribe from parent for it change

<script>
    import { EventBus } from '../EventBus.js';
    export default {
        ...
        data() {
            return {
              childData: null
            }
        },
        created() {
            EventBus.$on('selectData', (data) => {
                this.childData = data;
            });
        },
        methods: {
            add() {
                ...
            }
        }
    }
</script>