Web front-end ---- [Vue] (component) Communication between parent and child components This article will help you understand

Table of contents

Preface

Parent component passes to child component ---- props

Bind the attributes and attribute values to be passed to the subcomponent to which data is to be passed.

Use props configuration items in child components to receive

props configuration items

Child component passes to parent component ---- component's custom event

Child component passes data to parent component

Bind custom events through code

Preface

This article will introduce how parent-child components communicate in Vue

Parent component passes to child component ---- props

Here we first introduce how the parent component passes data to the child component.

First create the scaffolding Cli

Create parent component App.vue and child component SonX.vue

Subassembly

Export child components

<template>
  <div>
    <h1>我是儿子</h1>
  </div>
</template>

<script>
export default {
    name:'SonX'
}
</script>

<style>

</style>

parent component

Import subcomponents and register them for use

<template>
  <div id="app">
   <SonX></SonX>
  </div>
</template>

<script>
import SonX from './components/SonX.vue'

export default {
  name: 'App',
  components: {
    SonX
  }
}
</script>

<style>

</style>

Bind the attributes and attribute values to be passed to the subcomponent to which data is to be passed.

Add properties only on child components

<template>
  <div id="app">
   <SonX name="zs" age="20" gender="男"></SonX>
  </div>
</template>

Use props configuration items in child components to receive

<template>
  <div>
    <h1>我是儿子</h1>
    <h2>{
    
    {name}}</h2>
    <h2>{
    
    {age}}</h2>
    <h2>{
    
    {gender}}</h2>
  </div>
</template>

<script>
export default {
    name:'SonX',
    props:['name','age','gender']
}
</script>

<style>

</style>

Effect

Successfully rendered to the page

props configuration items

Note: Do not modify the data in props directly

Simple reception, directly in array form:

props:['name','age','gender']

Add type restrictions:

props:{

name:String,

age:Number,

gender:String

}

After adding type restrictions, if the attribute value passed by the parent component does not match, an error will be reported.

As shown below, the age='20' passed by the parent component is a string, not a number, so an error is reported.

Add type constraints, and you can also add default values, and you can also add necessity:

props:{

name:{

type:String,

required:true

                        },

age:{

type:Number,

default:20

                        },

gender:{

type:String,

required:true

                        }

}

Added default value and necessity. When adding necessity, an error will be reported if it is not passed. Default value has been added. If this attribute is not passed, the subcomponent will use the default value.

Child component passes to parent component ---- component's custom event

in parent component

First customize an event on the child component

v-on: event name='function' or @event name="function"

<template>
  <div id="app">
   <SonX name="zs" age="20" gender="男" v-on:event="think"></SonX>
  </div>
</template>

<script>
import SonX from './components/SonX.vue'

export default {
  name: 'App',
  components: {
    SonX
  },
  methods:{
    think(){
      console.log('传递成功');
    }
  }
}
</script>

<style>

</style>

in child component

Use the following methods to execute custom events

this.$emit('Customized event name')

<template>
  <div>
    <h1>我是儿子</h1>
    <h2>{
    
    {name}}</h2>
    <h2>{
    
    {age}}</h2>
    <h2>{
    
    {gender}}</h2>
    <button @click="think2">测试</button>
  </div>
</template>

<script>
export default {
    name:'SonX',
    props:['name','age','gender'],
    methods:{
      think2(){
        this.$emit('event')
      }
    }
}
</script>

Child component passes data to parent component

in subcomponent

this.$emit('Customized event name', passed parameters)

<template>
  <div>
    <h1>我是儿子</h1>
    <button @click="think2">测试</button>
  </div>
</template>

<script>
export default {
    name:'SonX',
    data(){
     return {
      name:'ls',
      age:30,
      gender:'女'
     }
    },
    methods:{
      think2(){
        this.$emit('event',this.name,this.age,this.gender)
      }
    }
}
</script>

in parent component

Receive data passed from child components

<template>
  <div id="app">
   <SonX name="zs" age="20" gender="男" v-on:event="think"></SonX>
  </div>
</template>

<script>
import SonX from './components/SonX.vue'

export default {
  name: 'App',
  components: {
    SonX
  },
  methods:{
    think(name,age,gender){
      console.log(name,age,gender);
    }
  }
}
</script>

Successfully received and printed

Bind custom events through code

First get the subcomponent through ref

ref='Component name'

In the mounted hook function

The component name obtained by this.$refs.ref.$on('custom event name', callback function)

<template>
  <div id="app">
   <SonX ref="SonX"></SonX>
  </div>
</template>

<script>
import SonX from './components/SonX.vue'

export default {
  name: 'App',
  mounted(){
    this.$refs.SonX.$on('event',this.think)
  },
  components: {
    SonX
  },
  methods:{
    think(name,age,gender){
      console.log(name,age,gender);
    }
  }
}
</script>

render on page