Communication between Vue child components and parent components (with code)-JS Tutorial-php.cn

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

php是最好的语言

Release： 2018-08-06 15:54:26

Original

1912 people have browsed it

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>

Copy after login

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>

Copy after login

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

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>

Copy after login

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>

Copy after login

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

After clicking the button:
Communication between Vue child components and parent components (with code)

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!