1. The parent component passes data to the child component

Parent component:

<template>
  <div class="parent">
    <p>Parent component:{{ msg }}</p>
    <Child message="Hello, I am parent!"></Child>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        msg: 'Hello world'
      }
    }
  }
</script>

<style lang="less" scoped></style>

Sub components:

<template>
  <div class="child">
    <p>Sub components:{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: ['message'],
    data () {
      return {}
    }
  }
</script>

<style lang="less" scoped></style>

The way the parent component passes values to the child component:
1. The parent component introduces the child component and registers the attribute message.
2. Subcomponents get registered attribute message through props

Page display:

2. Subcomponent trigger events pass data to parent components

Parent component:

<template>
  <div class="parent">
    <p>Parent component:{{ msg }}，Displays the values passed from the subcomponent:{{ showChildData }}</p>
    <Child message="Hello, I am parent!" @event="handler"></Child>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        msg: 'Hello world',
        showChildData: ''
      }
    },
    methods: {
      handler (data) {
        console.log(data)
        this.showChildData = data
      }
    }
  }
</script>

<style lang="less" scoped></style>

Sub components:

<template>
  <div class="child">
    <p>Sub components:{{ message }}</p>
    <input type="button" @click="transmit" value="Passing data to parent components">
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: ['message'],
    data () {
      return {
        childData: 'Hello, I am child'
      }
    },
    methods: {
      transmit () {
        this.$emit('event', this.childData)
      }
    }
  }
</script>

<style lang="less" scoped></style>

The way a child component passes values to a parent component:
1. Parent component registration event
2. The child component passes values from the transmit event method to the parent component through $emit (', data)

The page clicks on the sub-component button to achieve the following effects:

3. Parent component calls child component data directly

Parent component:

<template>
  <div class="parent">
    <p>Displays the values passed from the subcomponent:{{ showChildData }}</p>
    <Child ref="child"></Child>
    <input type="button" @click="getChildData" value="Getting data from subcomponents">
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        showChildData: ''
      }
    },
    methods: {
      getChildData () {
        this.showChildData = this.$refs.child.childData
      }
    }
  }
</script>

<style lang="less" scoped></style>

Sub components:

<template>
  <div class="child">
    <input type="text" v-model="childData">
    <p>Sub components:{{ childData }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data () {
      return {
        childData: 'Hello, I am child'
      }
    },
    methods: {}
  }
</script>

<style lang="less" scoped></style>

Parent component gets child component data directly:
1. Parent component introduces child component and adds ref attribute
Description: ref is used to register reference information for DOM elements or subcomponents. Reference information is registered according to the $refs object of the parent component. If used on common DOM elements, reference information is the element; if used on subcomponents, reference information is the component instance.
Note: As long as you want to manipulate DOM elements directly in Vue, you must register with ref attribute.
2. The parent component gets data directly through this.$refs.child. attribute
Description: Within the parent component, the attributes and methods of the child component are acquired in the following ways
this.$refs.child. attribute
this.$refs.child. Method

Page effect:

4. The child component calls the parent component data directly

Parent component:

<template>
  <div class="parent">
    <input type="text" v-model="parentData" style="width: 500px;">
    <p>Parent component:{{ parentData }}</p>
    <Child></Child>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        parentData: 'Hello, I am parent!'
      }
    },
    methods: {}
  }
</script>

<style lang="less" scoped></style>

Sub components:

<template>
  <div class="child">
    <p>Sub components:{{ showParentData }}</p>
    <input type="button" @click="getParentData" value="Getting data from parent components">
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data () {
      return {
        showParentData: ''
      }
    },
    methods: {
      getParentData () {
        this.showParentData = this.$parent.parentData
      }
    }
  }
</script>

<style lang="less" scoped></style>

Parent component gets child component data directly:
1. Parent component introduces child component
2. Subcomponents get data directly through this.$parent. attribute
Description: In the sub-component, the attributes and methods of the sub-component can be obtained by the following ways
this.$parent. attribute
this.$parent. Method

Page effect: