Home > Web Front-end > Vue.js > body text

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

青灯夜游
Release: 2020-11-05 17:50:00
forward
2657 people have browsed it

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>
Copy after login

Subcomponent code:

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

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!

Related labels:
vue
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!