Communication between Vue child components and parent components (with code)

1. Environment setup

• Download vue-cli: npm install -g vue-cli

• Initialization Project: vue init webpack vue-demo

• Enter the vue-demo folder: cd vue-demo

• Download and install dependencies: npm install

• Run the project: npm run dev

2. Parent component passes value to child component

• Create a component under the src/components/ folder, Home.vue

• Create subcomponents, create a new folder under the src/components/ folder, and create a new component Child.vue in the new folder

Create props in Child.vue, use To receive the value passed by the parent component

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array
    }
}
</script>

<style  scoped>
    
</style>

Register the Child component in Home.vue, and add the home-child tag in the p tag of the template. Use the v-bind instruction to bind the tag. Set c. The child component can receive the value passed by the parent component through props.

<template>
  <p class="hello">
    <home-child v-bind:c="c"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

<style scoped>

</style>

Result

3. The child component passes the value to the parent component

Bind the click event ChildClick
to the button in the function of the event Use $emit to trigger a custom event and pass a parameter. This parameter is the value that the child component will pass to the parent component.

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array,
        data: String
    },
    methods: {
        ChildClick: function () {
            this.$emit("ListenChild","I am child.vue")
        }
    }
}
</script>

<style  scoped>

</style>

Listen to the custom event in the home-child tag in the parent component, and add a method ShowChild that responds to the event.

<template>
  <p class="hello">
    <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;Home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3],
      data: " "
    }
  },
  methods: {
    ShowChild: function (data) {
      this.data = data
      console.log("data:" + data)
    }
  }
}
</script>

<style scoped>

</style>

Result:

After clicking the button:

Related articles:
Detailed explanation of vue components with examples Detailed explanation of communication between child and parent (2)

Detailed explanation of communication between vue child component and parent component

The above is the detailed content of Communication between Vue child components and parent components (with code). For more information, please follow other related articles on the PHP Chinese website!