Home  >  Article  >  Web Front-end  >  How to change the value in the parent component in a vue2.0 child component?

How to change the value in the parent component in a vue2.0 child component?

青灯夜游
青灯夜游forward
2020-11-05 17:50:002632browse

The following Vue.js tutorial column will introduce to you the method of changing the value of the parent component through v-modal in the vue2.0 neutron component. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to change the value in the parent component in a vue2.0 child component?

In vue2.0, the child component changes the value in the parent component through v-modal

Parent component code:

<template lang="pug">
  p
    p this is father
    child(v-model="data")
</template>
<script>
  import child from "./childrenS.vue";
  export default{
    data(){
      return {
        data: [1, 2, 3]
      }
    },
    components: {
      child
    },
    watch: {
      data(n, o){
        console.log(n,o)
      }
    }
  }
</script>

Subcomponent code:

<template lang="pug">
  p this is child
</template>
<script>
  export default{
      created(){
          this.$emit("input",[4,5,6])
      }
  }
</script>

The effect is as follows:

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit: Programming Learning Website! !

The above is the detailed content of How to change the value in the parent component in a vue2.0 child component?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete